Introduction:
Here I will explain 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.
Description:
In previous articles I explained jQuery read and parse JSON string using ParseJSON method, jQuery call asp.net page methods from json, jQuery add multiple markers to google map from database, jQuery check file size before upload in asp.net, jQuery setInterval() function example and many articles relating to jQuery, JSON, JavaScript and asp.net. Now I will explain how to convert JSON data to html table using jQuery.
In previous articles I explained jQuery read and parse JSON string using ParseJSON method, jQuery call asp.net page methods from json, jQuery add multiple markers to google map from database, jQuery check file size before upload in asp.net, jQuery setInterval() function example and many articles relating to jQuery, JSON, JavaScript and asp.net. Now I will explain how to convert JSON data to html table using jQuery.
<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": "Suresh
Dasari", "Education":
"B.Tech", "Location": "Chennai"
},
{ "Name": "Rohini Dasari", "Education": "BMSC",
"Location": "Guntur" },
{ "Name": "Siva Prasad", "Education":
"Msc", "Location":
"Nagpur" },
{ "Name": "Madhav Sai", "Education":
"MBBS", "Location":
"Nagpur" },
{ "Name": "Sudheer", "Education":
"B.Tech", "Location": "Kakinada"
},
{ "Name": "Sateesh", "Education":
"MD", "Location":
"Vizag" },
{ "Name": "Praveen A", "Education":
"B.Tech", "Location": "Chennai"
}]
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>
|
Demo
For live demo check below table it’s build by using
above JSON data
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
2 comments :
hello Suresh Sir,
I want to convert Json string to datatable.please help me.
{"apple.com":{"status":"regthroughothers","classkey":"domcno"},"asdfgqwx.com":{"status":"available","classkey":"domcno"},"microsoft.org":{"status":"unknown"},"apple.org":{"status":"unknown"},"microsoft.com":{"status":"regthroughothers","classkey":"domcno"},"asdfgqwx.org":{"status":"unknown"}}
In addheadercols(list) function ur code like list.length it gives each character length of which list contains. It doesn't give column header count. Any solution for this?
Note: Only a member of this blog may post a comment.