Foreach in jquery

0

In the result of the ajax query, I receive a json, to this I need to list it in a table, apply the following, but it does not work for me. Someone to give me a hand, please.

    $.ajax({

    url:rutaOculta+"ajax/ajax.carrito.php",
    method:"POST",
    data:datos,
    cache:false,
    contentType:false,
    processData:false,
    success:function(respuesta){

        var resultado=JSON.parse(respuesta);

        $.each(resultado, function(index, value) {
             $(".cuerpo-tabla").html('<tr>'+
                        '<th>'+inex.descripcion+'</th>'+
                        '<th>'+inex.precio+'</th>'+
                        '<th>'+inex.cantidad+'</th>'+
                    '</tr>');
        });
    }
})
    
asked by Capzzula 17.05.2018 в 02:06
source

3 answers

1

The syntax to access your elements must first be from the value object, which is the one that will return the value of the position and second instead of accessing like this: value.description do it in this way value ['description']

I enclose the following example so you can see how to do it

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <tr>
      <th>id</th>
      <th>PageName</th>
    </tr>
    <tr class="cuerpo-tabla">
    </tr>
  </table>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
    var dato = [ 
     {"Id": 1, "PageName": "alfa"}, 
     {"Id": 2, "PageName": "beta"}, 
     {"Id": 3, "PageName": "gama"}
    ];



  $(function(){
    $.each(dato, function(index, value) {
             $(".cuerpo-tabla").html(
                        '<td>'+value['Id']+'</td>'+
                        '<td>'+value['PageName']+'</td>');
        });
  })


</script>
</body>
</html>

Or you can also do it with the append method and the text method as follows

 $.each(dato, function(index, value) {
             $(".cuerpo-tabla").append(
                        $('<td>').text(value.Id),
                        $('<td>').text(value.PageName));
        })
    
answered by 17.05.2018 / 02:19
source
1

You can concatenate everything in one variable and print it in an html element, to access the values of the json you have to do it from "value" followed by the name of the index:

var resultado=JSON.parse(respuesta);
var contenido = '';

$.each(resultado, function(index, value) {
    contenido += '<tr>'+
       '<th>'+value.descripcion+'</th>'+
       '<th>'+value.precio+'</th>'+
       '<th>'+value.cantidad+'</th>'+
    '</tr>';
});

$(".cuerpo-tabla").html(contenido);
    
answered by 17.05.2018 в 08:05
0

One of the main problems is the function .html() that what it does is load everything that was before in the table, so whenever you write a new record, delete what was before, the solution to that would be for example:

var html = "";
    $.each(resultado, function(index, value) {
               html+='<tr>'+
                            '<th>'+inex.descripcion+'</th>'+
                            '<th>'+inex.precio+'</th>'+
                            '<th>'+inex.cantidad+'</th>'+
                        '</tr>'
            });
 $(".cuerpo-tabla").html(html);

Another error is that within <tr> define <th> , which are used for headers, that does not cause an execution failure, but it would be more correct to use <td>

    
answered by 18.05.2018 в 13:00