Display Json data in HTML table using javascript [closed]

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