How to Convert JSON Object to HTML Table using JQuery

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>

Output

JSON Object to HTML Table using JQuery

Hello everyone, I am a Founder of dineshkrish.com.