How to Convert JSON Object to HTML Table using JQuery

on December 20, 2016

Post Views: 2,743

Convert JSON Object to HTML Table using JQuery

In this example, We will show you about, How to Convert JSON Object to HTML Table using JQuery. The output has been shared in the same post.

JSON Object

The Sample JSON Object Data given here. Which will be converted to HTML Table using JQuery.

{"items":
[{"itemId":101, "itemName":"Item 1", "itemDescription":"Item 1 Description", "itemPrice":100, "itemQuantity":2}, 
{"itemId":102, "itemName":"Item 2", "itemDescription":"Item 2 Description", "itemPrice":200, "itemQuantity":5}, 
{"itemId":103, "itemName":"Item 3", "itemDescription":"Item 3 Description", "itemPrice":300, "itemQuantity":7}, 
{"itemId":104, "itemName":"Item 4", "itemDescription":"Item 4 Description", "itemPrice":400, "itemQuantity":10}, 
{"itemId":105, "itemName":"Item 5", "itemDescription":"Item 5 Description", "itemPrice":500, "itemQuantity":8}
]}

Script Code

var jsonData = '{"items":[{"itemId":101, "itemName":"Item 1", "itemDescription":"Item 1 Description", "itemPrice":100, "itemQuantity":2}, {"itemId":102, "itemName":"Item 2", "itemDescription":"Item 2 Description", "itemPrice":200, "itemQuantity":5}, {"itemId":103, "itemName":"Item 3", "itemDescription":"Item 3 Description", "itemPrice":300, "itemQuantity":7}, {"itemId":104, "itemName":"Item 4", "itemDescription":"Item 4 Description", "itemPrice":400, "itemQuantity":10}, {"itemId":105, "itemName":"Item 5", "itemDescription":"Item 5 Description", "itemPrice":500, "itemQuantity":8}]}';
$(document).ready(function() {
var obj = JSON.parse(jsonData);
var itemArray = obj['items'];
var length = itemArray.length;
for(var i = 0; i < length; i++) {
var tempObj = itemArray[i];
var data = '<tr><td>'+(i+1)+'</td><td>'+tempObj["itemId"]+'</td><td>'+tempObj["itemName"]+'</td><td>'+tempObj["itemDescription"]+'</td><td>'+tempObj["itemPrice"]+'</td><td>'+tempObj["itemQuantity"]+'</td></tr>';
$('#itemTable').append(data);
}
});

Final Example

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How to Convert JSON Object to HTML Table using JQuery</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<h1>How to Convert JSON Object to HTML Table using JQuery</h1>
<div>
<table cellpadding="5" cellspacing="5" border="1" id="itemTable">
<tr>
<th>S.no</th>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Description</th>
<th>Item Price</th>
<th>Item Quantity</th>
</tr>
</table>
</div>
<script>
var jsonData = '{"items":[{"itemId":101, "itemName":"Item 1", "itemDescription":"Item 1 Description", "itemPrice":100, "itemQuantity":2}, {"itemId":102, "itemName":"Item 2", "itemDescription":"Item 2 Description", "itemPrice":200, "itemQuantity":5}, {"itemId":103, "itemName":"Item 3", "itemDescription":"Item 3 Description", "itemPrice":300, "itemQuantity":7}, {"itemId":104, "itemName":"Item 4", "itemDescription":"Item 4 Description", "itemPrice":400, "itemQuantity":10}, {"itemId":105, "itemName":"Item 5", "itemDescription":"Item 5 Description", "itemPrice":500, "itemQuantity":8}]}';
$(document).ready(function() {
var obj = JSON.parse(jsonData);
var itemArray = obj['items'];
var length = itemArray.length;
for(var i = 0; i < length; i++) {
var tempObj = itemArray[i];
var data = '<tr><td>'+(i+1)+'</td><td>'+tempObj["itemId"]+'</td><td>'+tempObj["itemName"]+'</td><td>'+tempObj["itemDescription"]+'</td><td>'+tempObj["itemPrice"]+'</td><td>'+tempObj["itemQuantity"]+'</td></tr>';
$('#itemTable').append(data);
}
});
</script>
</body>
</html>