Create table from json jQuery with detailed example

3 Comments | 820 Views | Post by: Admin | Tags: Create table from json jQuery with detailed example, json jQuery with detailed example, json jQuery


In this we are going to learn to Create table from json jQuery with detailed example. I most cases developer need to Create table from json jQuery with detailed example


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:

loading...