Error traversing a JSON

0

I am trying to run a json which I previously obtained from php. But when I try to run it to show it, it sends me this error in the console.  

I'm new to javascript and ajax, my goal is that json, is an array of a query made in mysql, when I print it by console, if the result is normal. but my problem is to cross it since I need to show the list in a 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> 

    
asked by Luis Fernando Zumaran 05.05.2018 в 13:12
source

1 answer

1

First of all, I would say, according to your screen captures, that the JSON that comes from the server is malformed, or at least does not comply with the required format to be a list of elements, so I leave you a how should I look:

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

To move on to correct this problem you should post the code with which you query and build the JSON, but it should look something like this:

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

The second thing is that you are doing something else in jquery by parsing the json, because you have already specified that the answer you expect is a JSON when you say:

datatype : "JSON",

Although here use it in lowercase and the parameter in camelCase, therefore it would be :

dataType : "json",

With which jquery would be in charge of the conversion, as long as the JSON coming from PHP is well formed. So the following line would be omitted:

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

Finally, a correction to your code in the foreach is necessary when you are populating the select; this snippet of code:

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

should look more like this:

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

where index is the index or position of the current element in the array, and value is the value for the position of the current element (the data of a provider;)) in the array while the cycle is being done .

I hope it helps you.

    
answered by 06.05.2018 / 00:06
source