Anup Das Gupta's blog: December 2010

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-

<!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>