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
– Jonas Wilms, Commented Feb 17, 2017 at 18:34
Try foreach loop refer the below link stackoverflow.com/q/9329446/4984906 — user4423018
– user4423018, Commented Feb 17, 2017 at 18:49

charlietfl · Accepted Answer · 2017-02-17 18:39:59Z

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>

BenShelton · Accepted Answer · 2017-02-17 18:34:08Z

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, 2017 at 18:34

BenShelton

9111 gold badge8 silver badges20 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2017-02-17 18:44:33Z

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, 2017 at 18:44

answered Feb 17, 2017 at 18:38

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Collectives™ on Stack Overflow

How map json Data to show in Javascript table

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related