Loop through json object and put it in html table

Question

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");
}

can you show the content of data ?

Maxime Girou
– Maxime Girou

2019-09-03 07:46:11 +00:00
Commented Sep 3, 2019 at 7:46 — Maxime Girou
– Maxime Girou, Commented Sep 3, 2019 at 7:46
please give some sample data

ANIK ISLAM SHOJIB
– ANIK ISLAM SHOJIB

2019-09-03 07:46:52 +00:00
Commented Sep 3, 2019 at 7:46 — ANIK ISLAM SHOJIB
– ANIK ISLAM SHOJIB, Commented Sep 3, 2019 at 7:46
Thanks for answering. Here is some sample: prnt.sc/p12x10

dado
– dado

2019-09-03 07:49:59 +00:00
Commented Sep 3, 2019 at 7:49 — dado
– dado, Commented Sep 3, 2019 at 7:49

ANIK ISLAM SHOJIB · Accepted Answer · 2019-09-03 08:55:48Z

3

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);
                }
            });

edited Sep 3, 2019 at 8:55

answered Sep 3, 2019 at 7:55

ANIK ISLAM SHOJIB

3,3383 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

dado Over a year ago

Thats great example! But how can i use it in my case, where i get json data from url (using this code i get error "Uncaught TypeError: data.forEach is not a function").

ANIK ISLAM SHOJIB Over a year ago

can you give me your sample data you are receiving form your server-side

dado Over a year ago

Yes offcourse. There you go: prnt.sc/p12x10 i need to output only Data, not Result and Message.

ANIK ISLAM SHOJIB Over a year ago

please share your code also it seems you have an array of object this should be working

dado Over a year ago

Thanks @anik islam Shojib !

|

Reda Drissi · Accepted Answer · 2019-09-03 07:48:47Z

1

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>");
}

answered Sep 3, 2019 at 7:48

Reda Drissi

1,7324 gold badges21 silver badges35 bronze badges

Collectives™ on Stack Overflow

Loop through json object and put it in html table

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest