Recorrer array json en ajax extraido mediante php

Question

soy nuevo en ajax y javascript. Mi objetivo es extraer el el valor del input en relacion y mediante ajax mandarlo a php, alli mediante una funcion que tengo con mysqli, obtengo un array, al final uso echo json_encode, pero no sé ha donde va esa parte, al final estoy tratando que el select, option me aparescan las opciones de la lista que le ingrese segun la relacion. Cuando le doy al boton buscar, no me carga la lista, parece que anda mal mi ajax, el boton esta fuera del formulario, solo que en la imagen no lo actualize.

    <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">Relacion<span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="number" id="relacion" name="txtRelacion" required="required" class="form-control col-md-7 col-xs-12">

                           <script type="text/javascript">
                            $(document).ready(function(){
                              $("#btnB").on('click',function() {
                                var relacion = $("#relacion").val();

                                $.ajax({
                                      // metodo: puede ser POST, GET, etc
                                      method: "POST",
                                      // la URL de donde voy a hacer la petición
                                      url: "listprov.php",
                                      // los datos que voy a enviar
                                      data: { rel: relacion},
                                      datatype : "json",
                                      // si tuvo éxito la petición
                                      success: function(listP) {
                                        var select = $('select[name=cboIdEmpresa]');

                                        select.find().remove().end().appened('<option value="-1">Seleccione el proveedor de Nivel</option>');
                                        for (var i = 0; i < listP.length; i++) {
                                            select.append('<option value="' + listP[i][0] + '">' + listP[i][1] + '</option>');
                                        }
                                        //  for (dato in listP) {
                                        //     alert(dato);
                                        //     select.append('<option value="' + dato[0] + '">' + dato[1] + '</option>');
                                        // } 
                                      }
                                });    
                              });
                            });
                            </script>
                            <label>Proveedor:</label>
                            <select name="cboIdEmpresa" class="form-control">
                              ?>
                              <option value="-1">Seleccione el Proveedor de Nivel </option>   
                            </select> 
                        </div>
                      </div>

<?php
require("header.php");
  include("../Controller/conexion.php");
  include("../Model/Proveedores.php");
  include("../Model/Clientes.php");


    $obj = new Conexion;
    $conexion = $obj->getConexion();


    $objProveedor = new Proveedores($conexion);
    $objCliente    = new Clientes($conexion);


$nivel = $_POST['rel']; 
// echo "<script>alert('$nivel');</script>";
$listP = $objProveedores->ListarPPN($nivel);

// una vez que obtengas los datos, pasas esos en un json_encode()
// esto es para que puedas utilizarlo del lado del cliente
echo json_encode($listP);
?>

Tienes un typo aqui: `select.find().remove().end().appened('');` — alanfcm, May 03 '18 at 18:14
Luis [este código hace algo parecido a lo que tú quieres](http://phpfiddle.org/main/code/6fju-td04) de una manera óptima (pulsa **`Run - F9`** para probarlo). Es parte de [esta respuesta](https://es.stackoverflow.com/a/128139/29967) a un problema parecido al tuyo, donde explico todo con detalle. Espero te sirva. — A. Cedano, May 03 '18 at 18:14
El nombre debe de ir en comillas en esta linea: `var select = $('select[name=cboIdEmpresa]');` — alanfcm, May 03 '18 at 18:20
Ya modifique lo de las comillas, respecto a la primera respuesta, a que te refieres con el typo?. Disculpa soy nuevo. Saludos. — Luis Fernando Zumaran, May 03 '18 at 18:34

score 1 · Accepted Answer · answered May 04 '18 at 14:21

Tu variable listP contiene el resultado de tu llamada al servidor al archivo listprov.php solo tienes que recorrerla e ir agregando el contenido del arreglo al elemento select , puede ser de esta manera.....

success: function(listP) {
  $.each(listP, function(idx, opt) {
      console.log("estoy recorriendo");
      //console.log(listP);
      $('#selectALlenar').append('<option value="' + opt.idValor + '">' + opt.valorADesplegar + '</option>');
     });
 });                                        
}

Donde console.log lo utilizamos para que en la consola de nuestro navegador se nos muestre la informacion que contiene el arreglo listP (Puedes abrir el modo desarrollador con Ctrl+Shift+i)

Y #selectALlenar es el id de tu elemento select que quieres que se pueble con la información extraída de la base de datos

Cuando recibo listP por Sucess, tengo que decodificarla con JSON? o solo la recorro como me muetras en tu ejemplo? Por cierto idx y opt, es el indice y el valor del array verdad? — Luis Fernando Zumaran, May 05 '18 at 08:31
No, no es necesario decodificarlo, ya que Javascript interpreta correctamente la información del JSON, y estas en lo correcto son el indice y valor respectivamente — Rico, May 07 '18 at 13:57

score -1 · Answer 2 · answered May 03 '18 at 18:00

-1

success: function (data)
        {

        $.each(data, function (idx,proveedor)
            {
                select.append($('<option>', {value: proveedor.id, text: proveedor.nombre}));
            });

        }

el id y nombre segun tus campos en la base de datos

answered May 03 '18 at 18:00

Igmer Rodriguez

4,308
3
19
44

ese parametro data, sería el array que recibe del php que retorna el json_encode()? disculpa soy nuevo. Abajo puse el codigo php que me reedirige y al final con un echo devuelvo el json_encode, de ahi no sé muy bien hacia donde. – Luis Fernando Zumaran May 03 '18 at 18:31

Recorrer array json en ajax extraido mediante php

2 Answers2