Anup Das Gupta's blog: 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>

Wednesday, November 3, 2010

HTML MULTI SELECT - maintain multiple selection state without Control Key.

Problem Description:
Recently I had a problem with MULTISELECT. The default behavior of MULTISELECT is that when we need to select multiple items at a time, either we need to press control key and then by mouse click select multiple item or by mouse drag. My problem was to maintain the previously selected item without the help control key.

Solution:
A simple jQuery code serves this purpose as follows

I have used ID selector. But we can use any kind of selector of our choice.