Question

106

How to display a json array in table format?

rated 0 times [ 109] [ 3] / answers: 1 / hits: 146863 / 11 Years ago, fri, august 23, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tatumm

Add To Favorites

Follow

Total Points: 47

Total Questions: 92

Total Answers: 89

Location: Palau

Member since Tue, May 30, 2023

1 Year ago

answered 11 Years ago kristinsonjab · Accepted Answer

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



    }