How to display a json array in table format?

Question

I have a json array with this format:

[
    {
        id : "001",
        name : "apple",
        category : "fruit",
        color : "red"
    },
    {
        id : "002",
        name : "melon",
        category : "fruit",
        color : "green"
    },
    {
        id : "003",
        name : "banana",
        category : "fruit",
        color : "yellow"
    }
]

Now, I want to parse and display it in table format in Javascript or jQuery. The table has four columns, and each column indicates each attribute of each element in this array. The first row of this table is the name of these four keys. And the other rows are the values of these keys.

I don't know how to write a JavaScript code to achieve this function. Could you help me with this?

possible duplicate. https://github.com/afshinm/Json-to-HTML-Table the link was already suggested by @Afshin Mehrabani a year ago. Have it a try — Tyro Hunter, Aug 23 '13 at 06:17
IS that a school assignment? this is the second time I see this exact question, just a different user — Roko C. Buljan, Aug 23 '13 at 06:18
It saddens me to see people answering a question that shows zero research effort :( This question has been asked and answered many times. — jahroy, Aug 23 '13 at 06:23
Some one has already provided answer for this, http://stackoverflow.com/questions/13947067/create-html-table-in-javascript-with-json-or-jquery — Sushrut, Aug 23 '13 at 06:23
Here's a [fiddle](http://jsfiddle.net/PvLHP/3/) I wrote for [this question](http://stackoverflow.com/a/17708033/778118) about a month ago... — jahroy, Aug 23 '13 at 06:26
I couldn't help myself... [fiddle](http://jsfiddle.net/jahroy/FeFau/) — jahroy, Aug 23 '13 at 07:30
@jahroy hahahaahahh you nasty time waster heheh :D you made my day! nice done! — Roko C. Buljan, Aug 23 '13 at 09:05

score 26 · Accepted Answer · answered Aug 23 '13 at 06:28

DEMO

var obj=[
        {
            id : "001",
            name : "apple",
            category : "fruit",
            color : "red"
        },
        {
            id : "002",
            name : "melon",
            category : "fruit",
            color : "green"
        },
        {
            id : "003",
            name : "banana",
            category : "fruit",
            color : "yellow"
        }
    ]
    var tbl=$("<table/>").attr("id","mytable");
    $("#div1").append(tbl);
    for(var i=0;i<obj.length;i++)
    {
        var tr="<tr>";
        var td1="<td>"+obj[i]["id"]+"</td>";
        var td2="<td>"+obj[i]["name"]+"</td>";
        var td3="<td>"+obj[i]["color"]+"</td></tr>";

       $("#mytable").append(tr+td1+td2+td3); 

    }

I am using `.each` and it's displaying only the last value.The `.append` is in a 2 nested .each. `jQuery.each(arrayobj, function(key, value){ jQuery.each(value, function(label, answer){ display = ''+label+ '' +answer+''}); }); $('#tbody').append(display);` — Neocortex, Nov 07 '14 at 17:14

score 11 · Answer 2 · answered Aug 23 '13 at 06:21

11

using jquery $.each you can access all data and also set in table like this

<table style="width: 100%">
     <thead>
          <tr>
               <th>Id</th>
               <th>Name</th>
               <th>Category</th>
               <th>Color</th>
           </tr>
     </thead>
     <tbody id="tbody">
     </tbody>
</table>

$.each(data, function (index, item) {
     var eachrow = "<tr>"
                 + "<td>" + item[1] + "</td>"
                 + "<td>" + item[2] + "</td>"
                 + "<td>" + item[3] + "</td>"
                 + "<td>" + item[4] + "</td>"
                 + "</tr>";
     $('#tbody').append(eachrow);
});

answered Aug 23 '13 at 06:21

NaYaN

1,300
7
11

hey NaYan this isn't working for me..only the last array value is displaying. I am using nested .each. `jQuery.each(arrayobj, function(key, value){ jQuery.each(value, function(label, answer){ display = ''+label+ '' +answer+''}); }); $('#tbody').append(display);` – Neocortex Nov 07 '14 at 17:17
Hey Banned from SO, your code must be like this: jQuery.each(arrayobj, function(key, value){jQuery.each(value, function(label, answer){display = '' + label + '' + answer + '';$('#tbody').append(display);});}); – NaYaN Nov 21 '14 at 07:30

score 3 · Answer 3 · edited Apr 14 '18 at 13:59

var data = [
    {
        id : "001",
        name : "apple",
        category : "fruit",
        color : "red"
    },
    {
        id : "002",
        name : "melon",
        category : "fruit",
        color : "green"
    },
    {
        id : "003",
        name : "banana",
        category : "fruit",
        color : "yellow"
    }
];

for(var i = 0, len = data.length; i < length; i++) {
    var temp = '<tr><td>' + data[i].id + '</td>';
    temp+= '<td>' + data[i].name+ '</td>';
    temp+= '<td>' + data[i].category + '</td>';
    temp+= '<td>' + data[i].color + '</td></tr>';
    $('table tbody').append(temp));
}

score 3 · Answer 4 · answered Aug 23 '13 at 06:21

var jArr = [
{
    id : "001",
    name : "apple",
    category : "fruit",
    color : "red"
},
{
    id : "002",
    name : "melon",
    category : "fruit",
    color : "green"
},
{
    id : "003",
    name : "banana",
    category : "fruit",
    color : "yellow"
}
]

var tableData = '<table><tr><td>Id</td><td>Name</td><td>Category</td><td>Color</td></tr>';
$.each(jArr, function(index, data) {
 tableData += '<tr><td>'+data.id+'</td><td>'+data.name+'</td><td>'+data.category+'</td><td>'+data.color+'</td></tr>';
});

$('div').html(tableData);

How to display a json array in table format?

4 Answers4

Linked

Related