Simple JSON to HTML Table

Question

I have a very simple data that i want to display in table.

DATA

[{"1":"Red","2":"Orange","3":"Blue","4":"Yellow"}]

CODE:

 var a = [];
                    $.each(data, function (key, val) {
                        a.push('<tr id="tr_' +key+ '">');
                        a.push('<td>' + key+ '</td>');
                        a.push('<td>' + val+ '</td>');
                        a.push('</tr>');
                    });
                    var s = a.join('');
                    $('#color-list').html(s);

The above code resulted in [object Object] instead of the Data.

Below is my expected result

1 Red

2 Orange

3 Blue

4 Yellow

Any suggestion will be greatly appreciated

You may very well use a dedicated jQuery plugin to populate data from JSON to HTML github.com/anuary/jquery-json-to-table. You are playing with raw HTML, rather than DOM. Which isn't really practical or safe. Since you already using jQuery you might just learn to use .text() and .html(). — Gajus
– Gajus, Commented Aug 19, 2012 at 12:26

njr101 · Accepted Answer · 2012-05-15 07:29:35Z

1

Your data variable is an array (containing only one element). The object is actually the first element of that array. So use:

$.each(data[0], function (key, val) {
    ...

answered May 15, 2012 at 7:29

njr101

9,6237 gold badges42 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

genpet Over a year ago

Thank you so much! That exactly what I want.

howard10 · Accepted Answer · 2012-05-15 07:31:44Z

1

Your data is an array of 1 value which is an object. If you loop through the array you'll get one row in your table with that object as the value.

Instead you should remove the [] and have just the object and then go through the keys/values of that instead:

var data = {"1":"Red","2":"Orange","3":"Blue","4":"Yellow"}

This then gives the result you want.

If you can't get rid of the [ ] for some reason (e.g. external data source) then just use data[0] in your loop instead of data to get the object from the first position in the array.

answered May 15, 2012 at 7:31

howard10

1,8512 gold badges14 silver badges21 bronze badges

Comments

SpareMe · Accepted Answer · 2012-05-15 07:42:52Z

0

You can just loop around in this way:

 // If the returned data is an object do nothing, else try to parse
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
for (var i = 0; i < array.length; i++) {
    str += '<tr>';
    for (var index in array[i]) {
        str += '<td>' + array[i] + '</td><td>' + array[i][index] + '</td>';
    }
    str += '</tr>';
}

answered May 15, 2012 at 7:42

SpareMe

717 bronze badges

Comments

Sankumarsingh · Accepted Answer · 2013-09-20 10:35:25Z

0

Actually Sometimes it doesnt works when json is in string form. Please try the following:

[{"Srno":38,"ReqId":36,"ItemId":155,"Qty":90.00,"TransferItemId":null,"TransferQty":null,"ExpReqDated":"\/Date(1363285800000)\/","IsCancelled":false,"Remarks":null},d":171,"Qty":40.00,"TransferItemId":null,"TransferQty":null,"ExpReqDated":"\/Date(1363717800000)\/","IsCancelled":false,"Remarks":null},{"Srno":113,"ReqId":53,"ItemId":172,"Qty":40.00,"TransferItemId":null,"TransferQty":null,"ExpReqDated":"\/Date(1363717800000)\/","IsCancelled":false,"Remarks":null}]"

Then We have cast json by JSON.parse(data) to convert it in array...

edited Sep 20, 2013 at 10:35

Sankumarsingh

10.1k11 gold badges54 silver badges75 bronze badges

answered Sep 20, 2013 at 10:12

Mayank Pandit

212 bronze badges

Collectives™ on Stack Overflow

Simple JSON to HTML Table

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related