How to bring an array via ajax and place results in a select

Question

Hello, I am trying to bring an array via ajax and play the result in a select, I can make a query via ajax where each client I select in a select it makes the query via ajax and returns the services linked to that client in an array,So far it worked, only that I stuck in this part to show the data of the array, I needed to take the column, id_product and product name_but I can not kk to learning yet, who can help me thank. My code is like this:

 //Função trazer serviços vinculados ao cliente
        $(document).on("change", "#cliente", function(){
           
            var id_cliente = $('[name=cliente]').val();
        
             $.ajax({
                 type:"POST",
                 url:"http://[::1]/admin/clientes/servicoCliente",                
                 data:{input_id:id_cliente},
                 dataType: "json",
                 success: function (resposta){
 
                   if (resposta.erro == 0) {
                      
                      var select = '<option value='+ resposta.listar_servico[id_produto] +' ' + resposta.listar_servico[nome_produto] + '>' + resposta.listar_servico[nome_produto] + '</option>';
                                                        
                      $('#servicos').html(select);      
                      console.log(resposta.listar_servico);
                      
                   } else{
 
                      alert('Erro ao trazer serviços');
                   }
 
                 },
                 error:function(){
                     console.log(resposta);
                     alert('Erro ao trazer serviços.');
                 }
            });
 
        });

//Aqui meu php onde deveria retornar a resposta do ajax
 <div class="form-group col-md-5">
                      <label>Serviço:</label>
                      <div class="col-sm-15">
                      <select name="servicos" id="servicos" class="form-control">
                        
                      </select>
                    </div>
                  </div> 

And on the island he brings the answer so:

listar_servico: [{idcli: "7", nome: "José Gonçalves", id_produto: "1", pedi: "24",…},…]
0: {idcli: "7", nome: "José Gonçalves", produtos: "1", pedi: "24",…}
data_cadastro: "2020-04-14"
idcli: "7"
nome: "José Gonçalves"
nome_produto: "Software"
notapen: "7"
pedi: "24"
id_produto: "1"
total_pedido: "119.00"

1: {idcli: "7", nome: "José Gonçalves", produtos: "2", pedi: "27",…}
data_cadastro: "2020-05-05"
idcli: "7"
nome: "José Gonçalves"
nome_produto: "Suporte Web Site"
notapen: "7"
pedi: "27"
id_produto: "2"
total_pedido: "80.00"
msg: "Pedido atualizado com sucesso"

And I needed to attach the product and product name column to fill my select, who can help me thank you.

Answer 1

Put the ajax:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

And now try it this way:

 //Função trazer serviços vinculados ao cliente
        $(document).on("change", "#cliente", function(){
           
            var id_cliente = $('[name=cliente]').val();
             $.ajax({
                 type:"POST",
                 url:"http://[::1]/admin/bd_cadastrados/servicoCliente",                
                 data:{input_id:id_cliente},
                 dataType: "json",
                 success: function (resposta){
 
                   if (resposta.erro == 0) {
                                                            
                    var select = '<option value="">Selecione o Serviço</option>';
                       $.each(resposta.listar_servico, function (index, value){
                    select = select + '<option value="' + value.id_produto + '">' + value.nome_produto + '</option>';
                   });
                     $('#servicos').html(select);
  
                      console.log(resposta.listar_servico);
                      
                   } else{
 
                      alert('Erro ao trazer serviços');
                   }
 
                 },
                 error:function(){
                     console.log(resposta);
                     alert('Erro ao trazer serviços.');
                 }
            });
 
        });