Create table from json jQuery with detailed example

  JQUERY   Monday, November 9, 2015   1161 | 1 Comment | No Download | No Demo | Pawan kumar
 Tags: 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.

Post Comments

if you have some suggestion, question, request on Create table from json jQuery with detailed example.

Please use the comment box to express your views.

 

Comments: