This article explains how to convert JSON data to html table using jQuery or convert JSON data into html table using jQuery or jQuery convert JSON data into html table or jQuery create html table using JSON data.
To convert JSON data to html table using jQuery we need to write the code like as shown below
HTML Code-
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>convert json data to html table using jquery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function () { var myList = [{ "Name": "Ashwani", "Education": "B.Tech", "Location": "Lucknow" }, { "Name": "Vin", "Education": "BMSC", "Location": "Guntur" }, { "Name": "Ash", "Education": "Msc", "Location": "Nagpur" }, { "Name": "Tom", "Education": "MBBS", "Location": "Nagpur" }, { "Name": "Jack", "Education": "B.Tech", "Location": "Kakinada" }, { "Name": "Mack", "Education": "MD", "Location": "Vizag" }, { "Name": "Anu", "Education": "B.Tech", "Location": "Delhi" }] Bindhtmltable(myList); }) function Bindhtmltable(list) { var cols = addheadercols(list); for (var i = 0; i < list.length; i++) { var row = $('<tr/>'); for (var colIndex = 0; colIndex < cols.length; colIndex++) { var cellValue = list[i][cols[colIndex]]; if (cellValue == null) { cellValue = ""; } row.append($('<td/>').html(cellValue)); } $("#htmltable").append(row); } } function addheadercols(list) { var colset = []; var headerTr = $('<tr/>'); for (var i = 0; i < list.length; i++) { var rows = list[i]; for (var key in rows) { if ($.inArray(key, colset) == -1) { colset.push(key); headerTr.append($('<th/>').html(key)); } } } $("#htmltable").append(headerTr); return colset; } </script> </head> <body> <form id="form1" > <div> <table id="htmltable" border="1" cellpadding="5" style="border-collapse: collapse;"> </table> </div> </form> </body> </html>
Output-
Check below table it’s build by using above JSON data
No comments:
Post a Comment