How to display a json array in table format?

html, javascript, jquery, json

Solution

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

    }

Problem

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?

Original source

Related problems