Connor McManus Connor McManus - 2 months ago 10
jQuery Question

Looping through returned objects with Ajax success function, outputting to table

The console output is my current data being returned through ajax. In this instance, 2 objects were returned. Basically, for each object returned, I want to output/append the values to a new table row. In this instance, there would obviously be 2

<tr>
...
</tr>
instances.

My current console output

My current success function so far looks like this:

success: function(data){
// console.log(data);
$.each(data, function(index, value) {
$("tbody").append("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
});
}


I'm having trouble trying to access each value in each object. I know this is relatively simple with the .each function, but I'm having trouble wrapping my brain around it in this instance.

Answer

you have to do inner loop again for generate td for all records.

$.each(data, function(index, values) {
      var tr="<tr>";
       $.each(values, function(i,v){
           tr= tr+ "<td>"+v+"</td>";
       });
        tr= tr+ "</tr>";
      $("tbody").append(tr);
  });
Comments