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         


        

Answer 1

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

Html

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 += "" + property + "";
    }
    $(selector + ' thead tr').html(theadHtml);
}

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