Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Convert JSON Data to HTML Table using jQuery Row Append Properties

Feb 19, 2015
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.


To convert JSON data to html table using jQuery we need to write the code like as shown below


<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 RSS subscribe by email Subscribe by Email

2 comments :

Anonymous said...

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"}}

Madhuri said...

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?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.