<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="form1">
<div id="test">
</div>
<script type="text/javascript">
var table = "[{'Country':'mycity','Name':'abc','Age':'29','Email':'test@mail.com'}," +
"{'Name':'abcd','Age':'39','Email':'test1@mail.com'}," +
"{'Name':'abcde','Age':'30','Email':'test2@mail.com'}," +
"{'Age':'30','Sex':'male','Name':'abcde'}]";
table = eval('' + table + '');
var tableObject = function (json) {
var headerCount = new Object();
var createTR = function (id) {
var tr = document.createElement("tr");
tr.ID = id;
return tr;
};
var createTH = function (html) {
var th = document.createElement("th");
th.innerHTML = html;
return th;
};
var createTD = function (html) {
var td = document.createElement("td");
td.innerHTML = html;
return td;
};
var getName = function (id) {
for (var name in headerCount) {
if (eval("headerCount." + name) == id) {
return name;
}
}
};
var pTable;
if (json.length > 0) {
var index = 0;
pTable = document.createElement("table");
var head = createTR();
for (var i = 0; i < json.length; i++)
for (var item in json[i]) {
if (!headerCount.hasOwnProperty(item)) {
head.appendChild(createTH(item));
eval('headerCount.' + item + "=" + index);
index++;
}
}
pTable.appendChild(head);
for (var i = 0; i < json.length; i++) {
var row = new createTR(i);
for (var j = 0; j < index; j++) {
var name = getName(j);
if (eval("json[" + i + "].hasOwnProperty('" + name + "')")) {
row.appendChild(createTD(eval('json[' + i + '].' + name)));
}
else
row.appendChild(createTD(''));
}
pTable.appendChild(row);
}
}
return pTable;
};
var c = new tableObject(table);
document.getElementById("test").appendChild(c);
</script>
</form>
</body>
</html>
Wednesday, December 1, 2010
JSON to HTML table
There was a need to converting JSON object to HTML Table. I found out different solutions over internet. But there was no generic solution where I can pass a JSON string and get the HTML table in return. So, I tried out a solution with JavaScript. The code is as follows-
Subscribe to:
Post Comments (Atom)
Great Work Anup.
ReplyDeletethanx a lot that post weas really helpful.one more thing is that i have a output in json but it not formatted,so i directly can't put it in the code i have to make few changes,so can you tell me how to do that
ReplyDeleteShare your code.
DeleteIt is not accepting if column name has a space
ReplyDeleteHow can i use this when the JSON object is coming from an AJAX request to a outside page?
ReplyDeleteSimple. You can replace variable "table" with your ajax returned object. And place the whole code inside the success method of the ajax call.
DeleteHi Anup,
ReplyDeleteJust wondering if its possible to convert facebook graph api output (Json format) to be converted to an html table. Can you please demonstrate an example please. Thank you.
- James
The json object need to be an array of JavaScript object. That's the any criteria.
DeleteHie Anup,
ReplyDeleteI have a nested Json and want to display it as drill down HTML table. So what is the code for that?
Hi,
ReplyDeleteYou can use the concept and repeat the same for nested tables.