Create table from json jQuery with detailed example

Category > JQUERY || Published on : Monday, November 9, 2015 || Views: 1572 || Create table from json jQuery with detailed example json jQuery with detailed example json jQuery


Step 1: Create a tablein the HTML using the below codes:-

<table id="records_table" border='1'>
    <tr>
        <th>Rank</th>
        <th>Content</th>
        <th>UID</th>
    </tr>
</table>

Step 2: Create CSS in the Head Section of the HTML page

<style>
table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}
</style>

Step 3: Create the related jquery codes using the below codes:-

<script>

$.ajax({
    url: 'WebService.asmx/GetProducts',
    type: "post",
    dataType: "json",
    data: {
        json: JSON.stringify([
            {
            id: 1,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 2,
            firstName: "David",
            lastName: "Bowie"}
        ]),
        delay: 3
    },
    success: function(data, textStatus, jqXHR) {
        // since we are using jQuery, you don't need to parse response
        drawTable(data);
    }
});

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

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.firstName + "</td>"));
    row.append($("<td>" + rowData.lastName + "</td>"));
}
</script>

Note:Please include the jQuery file from any CDN

Conclusion,In this tutorial we have learned Create table from json jQuery with detailed example. hope you have enjoyed this tutorial.