0

estoy tratando de recorrer un json el cual obtengo previamente desde php. Pero cuando lo trato de correr para mostrarlo me manda este error en la consola. introducir la descripción de la imagen aquí

Soy nuevo en javascript y ajax, mi objetivo es que ese json, es un array de una consulta hecha en mysql, cuando lo imprimo por consola, si me muestra normal el resultado. pero mi problema es recorrerlo ya que necesito mostrar la lista en un select.

<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 datos = "";
                                    var select = $("select[name=cboIdEmpresa]");

                                    console.log($.parseJSON(JSON.stringify(listP)));
                                    var listP = $.parseJSON(JSON.stringify(listP));  
                                      select.empty();
                                      select.append('<option value="0">Seleccione el proveedor de Nivel</option>');

                                                $.each(listP,function(idProveedor,nombre){
                                       select.append('<option value="' + listP.idProveedor + '">' + listP.nombre+ '</option>');
                                      });


                                  }
                            });    
                          });
                        });
                        </script>
                        <label>Proveedor:</label>
                        <select id="selectA" name="cboIdEmpresa" class="form-control">
                          ?>
                          <option value="-1">Seleccione el Proveedor de Nivel </option>   
                        </select> 

introducir la descripción de la imagen aquí

5
  • intenta cambiar: select.append('<option value="' + listP.idProveedor + '">' + listP.nombre+ '</option>'); por select.append('<option value="' + listP[idProveedor] + '">' + listP[idProveedor].nombre+ '</option>');
    – fwBasic
    Commented el 5 may. 2018 a las 15:25
  • Me sale el mismo error, por cierto cuando imprimo el json que recibo de php me aparece codigo html comentado y al final los datos del json eso es normal ??? o creo que estoy haciendo algo incorrecto :( Commented el 5 may. 2018 a las 18:25
  • Sería bueno que nos mostraras el código PHP con que generas el json, ya que por lo que cuentas, te está agregando código "basura" a tus datos json. Esto puede ocurrir cuando cargas el script que escribe json, desde otro php (incluido), etc.
    – quinqui
    Commented el 5 may. 2018 a las 19:36
  • Revisa de nuevo mi post amigo. Commented el 5 may. 2018 a las 21:11
  • Trata de añadir a esta problematica el codigo php que estas utilizando. Commented el 5 may. 2018 a las 22:48

1 respuesta 1

1

En primer lugar, yo diría, según tus capturas de pantalla, que el JSON que proviene desde el servidor está mal formado, o al menos no cumple con el formato requerido para que sea una lista de elementos, por eso te dejo una aproximación de como debería lucir:

    [
        {idProveedor:"1" , nombre: "proveedor 1"},
        {idProveedor:"2" , nombre: "proveedor 2"},
        {idProveedor:"3" , nombre: "proveedor 3"},
    ]

Para pasar a corregir este problema deberías postear el código con el que consultas y construyes el JSON, pero debería lucir algo como esto:

$sth = mysqli_query("SELECT ...");
$rows = array();
while($r = mysqli_fetch_assoc($sth)) {
    $rows[] = $r;
}
print json_encode($rows);

Lo segundo es que estás haciendo algo demás en jquery parseando el json, pues ya le has especificado que la respuesta que esperas es un JSON cuando dices:

datatype : "JSON",

Aunque aquí lo utilizan en minúsculas y el parametro en camelCase, por lo tanto sería:

dataType : "json",

Con lo cual jquery se encargaría de la conversión, siempre y cuando el JSON que proviene desde PHP esté bien formado. Así pues se omitiría la siguiente linea:

var listP = $.parseJSON(JSON.stringify(listP));

Por último se hace necesaria una corrección a tu código en el foreach cuando estás poblando el select; este fragmento de código:

 $.each(listP,function(idProveedor,nombre){
     select.append('<option value="' + listP.idProveedor + '">' + listP.nombre+ '</option>');
 });

debería lucir mas como esta:

 $.each(listP,function(index , value){
     select.append('<option value="' + value.idProveedor + '">' + value.nombre+ '</option>');
 });

donde index es el indice o posición del elemento actual en el array, y value es el valor para la posición del elemento actual (los datos de un proveedor ;)) en el array mientras se está haciendo el ciclo.

Espero te sirva de algo.

2
  • Excelente respuesta!! ;))...
    – fwBasic
    Commented el 5 may. 2018 a las 23:05
  • Gracias, pude solucionarlo. Commented el 6 may. 2018 a las 1:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.