Display Json data in HTML table using javascript

Question

i want to display json file data in html table using javascript, i want the way i can start doing that. can anyone send me example or tutorials to start doing that. ( Display Json URL data in HTML table using javascript ) the table will have 2 column.

Answer 1

Here is an example:

http://jsfiddle.net/sEwM6/258/

I modified an existing fiddle (http://jsfiddle.net/mjaric/sEwM6/) to be a little more efficient. To learn more about AJAX requests in jQuery see http://api.jquery.com/jQuery.ajax/. AJAX requests can be completed without the help of a library such as jQuery, however, it is a little easier for beginners with jQuery. If you are seeking to learn Javascript, I would recommend looking up pure Javascript AJAX requests to understand what is going on (http://youmightnotneedjquery.com/#json).

The drawTable and drawRow functions are used to write the JSON data to the table. jQuery is also being used to write the text to the HTML page. Again, this can be done without jQuery as well. See http://youmightnotneedjquery.com/#setting_html.

$.ajax({
    url: '/echo/json/', //Change this path to your JSON file.
    type: "post",
    dataType: "json",
    //Remove the "data" attribute, relevant to this example, but isn't necessary in deployment.
    data: {
        json: JSON.stringify([
            {
            id: 1,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 2,
            firstName: "David",
            lastName: "Bowie"}
        ]),
        delay: 3
    },
    success: function(data, textStatus, jqXHR) {
        drawTable(data);
    }
});

function drawTable(data) {
    var rows = [];

    for (var i = 0; i < data.length; i++) {
        rows.push(drawRow(data[i]));
    }

    $("#personDataTable").append(rows);
}

function drawRow(rowData) {
    var row = $("<tr />")
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.firstName + "</td>"));
    row.append($("<td>" + rowData.lastName + "</td>"));

    return row;
}