1. Home
2. jquery
3. Create table from json jQuery with detailed example

Create table from json jQuery with detailed example

Category > JQUERY || Published on : Monday, November 9, 2015 || Views: 2590 || 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.

You might also like