How to append json array data to html table tbody

Question

I am very new into jQuery and JSON. I need to parse a JSON of the following format so as to populate a html table tbody:

{"response":[["name0","id0","amt0"],["name1","id1","amt1"]]}

But I am not sure how to get access to them, so to get html table in the following way:

header1 header2 header3
name0   id0     amt0
name1   id1     amt1

MazarD · Accepted Answer · 2012-10-02 16:17:17Z

9

Not tested but it can be something like:

var jsondata=$.parseJSON('{"response":[["name0","id0","amt0"],["name1","id1","amt1"]]}');

$.each(jsondata.response, function(i, d) {
   var row='<tr>';
   $.each(d, function(j, e) {
      row+='<td>'+e+'</td>';
   });
   row+='</tr>';
   $('#table tbody').append(row);
});

answered Oct 2, 2012 at 16:17

MazarD

2,7402 gold badges22 silver badges35 bronze badges

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

1 Comment

MazarD Over a year ago

@erip it's the index of the iteration over jsondata.response (an array) so it will be 0 and 1.

cjerrington · Accepted Answer · 2020-04-11 08:02:19Z

Call jsonToHtmlTable(jsonObj, '#records'); after following HTML (e.g in document ready)

Html

<table id="records">
    <thead>
        <tr></tr>
    </thead>
    <tbody></tbody>
</table>

JavaScript

//Sample JSON Object (array of json objects)
var jsonObj = [{"a":1,"b":3,"ds":4},{"a":2,"b":5,"ds":4}];

//Use
$(document).ready(function(){
     jsonToHtmlTable(jsonObj, '#records');
});

//implementation
function jsonToHtmlTable(jsonObj, selector) {
    addColumns(jsonObj, selector);
    addRows(jsonObj, selector);
}

function addColumns(jsonObj, selector) {
    if (!$.isArray(jsonObj) || jsonObj.length < 1)
        return;
    var object = jsonObj[0];
    var theadHtml = "";
    for (var property in object) {
        if (object.hasOwnProperty(property))
            theadHtml += "<th>" + property + "</th>";
    }
    $(selector + ' thead tr').html(theadHtml);
}

function addRows(jsonObj, selector) {
    var tbody = $(selector + ' tbody');
    $.each(jsonObj, function (i, d) {
        var row = '<tr>';
        $.each(d, function (j, e) {
            row += '<td>' + e + '</td>';
        });
        row += '</tr>';
        tbody.append(row);
    });
}

Alberto De Caro · Accepted Answer · 2012-10-02 16:17:10Z

0

You can access the JSON structure wiht this Javascript expression:

var matrix = {"response":[["name0","id0","amt0"],["name1","id1","amt1"]]};

The j-th column of the i-th element is accessible with this:

matrix.response[i][j]

answered Oct 2, 2012 at 16:17

Alberto De Caro

5,2139 gold badges50 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to append json array data to html table tbody

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related