CODEWITHSUNDEEP
javascriptjsonloopsfor-loop
dado
dado

Reputation: 23

Loop through json object and put it in html table

I need to loop through json file and output it in a html table. Below there is piece of code, so you'll get the feeling what i need to do. "data" contains json objects which i gained through ajax call.

I also tried with data.length but no luck offcourse since json objects are not defined in same file.

Any help would be much appreciated. Thanks.

$(data).each(function(index, value) {
  items.push("<tr>");
  items.push("<td id=''" + index + "''>" + value.Data[0].BoxIds + "<br/>" + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].ID + "<br/>" + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].Name + "<br/>" + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].Address + "<br/>" + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].ZIP + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].City + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].Country + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].Latitude + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].Longitude + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].ArraySizeX + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].ArraySizeY + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].BoxLocations + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[0].Type + "</td>");
  items.push("</tr>");
  items.push("<tr>");
  items.push("<td id=''" + index + "''>" + value.Data[1].BoxIds + "<br/>" + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].ID + "<br/>" + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].Name + "<br/>" + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].Address + "<br/>" + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].ZIP + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].City + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].Country + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].Latitude + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].Longitude + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].ArraySizeX + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].ArraySizeY + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].BoxLocations + "</td>");
  items.push("<td id=''" + index + "''>" + value.Data[1].Type + "</td>");
  items.push("</tr>");
  //console.log(data);
  //console.log(data.Data[0].Name);
});
$("<tbody/>", {
    html: items.join("")
  })
  .appendTo("table");
}

Upvotes: 2

Views: 3999

Answers (2)

ANIK ISLAM SHOJIB
ANIK ISLAM SHOJIB

Reputation: 3238

You can generate a table from array of object in following way

let data = [
{id: 1, name: 'anik', age: 29},
{id: 2, name: 'shojib', age: 50},
];
 let table = '<thead><tr><th>id</th><th>name</th><th>age</th></tr></thead><tbody>';

data.forEach(function(d){
  table += '<tr><td>'+d.id+'</td>';
  table += '<td>'+d.name+'</td>';
  table += '<td>'+d.age+'</td></tr>';
})
  table += '</tbody>';

$('#mytable').empty().html(table);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" border=1 >
</table>

Your ajax call should be like something below code. look for success section

$.ajax({
                url: '{{route('call.history.download')}}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: {
                    start_date: $('#start_date').val(),
                    end_date: $('#end_date').val(),
                    type: $('#type').val()
                },
                success: function(response){
                   let data = response.Data;
                   let table = '<thead><tr><th>id</th>   <th>name</th><th>age</th></tr></thead><tbody>';

                   data.forEach(function(d){
                      table += '<tr><td>'+d.id+'</td>';
                      table += '<td>'+d.name+'</td>';
                      table += '<td>'+d.age+'</td></tr>';
                   })
                 table += '</tbody>';

                 $('#mytable').empty().html(table);
                }
            });

Upvotes: 3

Reda Drissi
Reda Drissi

Reputation: 1672

You can loop through values of a dict with for var v in d If you need both key and value use for (k,v) in d.items()

So your code can become:

for var entry in value.Data {
    for var v in entry{
        items.push("<td id=''" + index + "''>" + v + "<br/>" + "</td>");
    }
    items.push("</tr>");
    items.push("<tr>");
}

Upvotes: 1

Related Questions