How map json Data to show in Javascript table

Question

I have this Json Data:

[{
"metadata": {
    "sortColumn": "Id",
    "sortOrder": "Asc"
},
"data": [{
    "id": "1",
    "name": "Sam",
    "age": "32"
}, {
    "id": "2",
    "name": "tom",
    "age": "22"
}]
}]

I need to show the data part in Grid like Table with javascript. I tried this but it shows a table with only the first row, how I can make changes so it shows all the rows(mean any size data that I pass).

function load() {
        data = '[{"metadata": {"sortColumn": "Id","sortOrder": "Asc"},"data": [{"id": "1","name": "Sam","age": "32"}, {"id": "2","name": "tom","age": "22"}]}]';

        var mydata = JSON.parse(data);

        $table = "<table id = 'resultTable'><td>Id</td><td>Name</td><td>Age</td><tr>";

        for (var i = 0; i < mydata.length; i++) {

                $table += "<tr>";

            var it = mydata[i];



            $table += "<td>" + it.data[i].id + "</td>";

            $table += "<td>" + it.data[i].name + "</td>";

            $table += "<td>" + it.data[i].age + "</td>";

            //alert(items[i].duration);
            $table += "</tr>";
        }



        $table += "</table>";

        $('body').append($table);
        $table = "<table id = 'resultTable'><td>Id</td><td>Name</td><td>Age</td><tr>";

for(key in mydata[0].data) ... mydata contains just one object... — Jonas Wilms, Feb 17 '17 at 18:34
Try foreach loop refer the below link http://stackoverflow.com/q/9329446/4984906 — , Feb 17 '17 at 18:49

charlietfl · Accepted Answer · 2017-02-17T18:39:59.080

You want to loop over mydata[0].data which is the rows data.

Although your structure doesn't really make sense having the outer array since you only have one object in that whole array.

If you removed the outer array and it was just an object you would loop over mydata.data

function load() {
  data = '[{"metadata": {"sortColumn": "Id","sortOrder": "Asc"},"data": [{"id": "1","name": "Sam","age": "32"}, {"id": "2","name": "tom","age": "22"}]}]';

  var mydata = JSON.parse(data);

  $table = "<table id = 'resultTable'><tr><td>Id</td><td>Name</td><td>Age</td></tr>";

  for (var i = 0; i < mydata[0].data.length; i++) {

    $table += "<tr>";

    var it = mydata[0].data[i];

    $table += "<td>" + it.id + "</td>";
    $table += "<td>" + it.name + "</td>";
    $table += "<td>" + it.age + "</td>";
    //alert(items[i].duration);
    $table += "</tr>";
  }

  $table += "</table>";
  $('body').append($table);
}
load()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 2 · answered Feb 17 '17 at 18:34

0

In this line:

 $table = "<table id = 'resultTable'><td>Id</td><td>Name</td><td>Age</td><tr>";

Take the extra tr off the end, as you are starting a new row for each item anyway.

answered Feb 17 '17 at 18:34

BenShelton

901
1
8
20

Jonas Wilms · Answer 3 · 2017-02-17T18:44:33.890

0

$(document.body).append("<table id = 'resultTable'><tr><td>Id</td><td>Name</td><td>Age</td></tr><tr><td>"+mydata[0].data.map(el=>Object.values(el).join("</td><td>")).join("</td></tr><tr><td>")+"</td></tr></table>");

Your main mistake is that your wanted array is mydata[0].data, not mydata. Ive also shortified your code ( note: its ES6)...

http://jsbin.com/tomitifafe/edit?output

edited Feb 17 '17 at 18:44

answered Feb 17 '17 at 18:38

Jonas Wilms

132,000
20
149
151

How map json Data to show in Javascript table

3 Answers3