title: Build a table layout from JSON data (code improvement)
body: <p>I have a JSON object like below and I am converting the JSON to HTML with below wrapper function</p>
  
  <p>Portion retrieved from JSON:</p>
  
  <pre><code>var data = { "Column Headers" : [ // Hierarchy is not limited to two levels, it is n level
      [  "Column1" , ["Column1's SubColumn 1", "Column1's SubColumn 2"] ], 
      [  "Column2" , ["Column2's SubColumn 1", "Column1's SubColumn 2"] ],
      [  "Column3" , ["Column3's SubColumn 1", "Column1's SubColumn 2"] ]  
  ],
  "Columns under subColumns" : ["I am column 1", "I am column 2"],
  "Data for Table" :[
      { "name": ["Group 1","Sub Group 1"], "data" : [[0,1],[1,2],[45,20],[0,1],[1,2],[45,20]]},
      { "name": ["Group 1","Sub Group 2"], "data" : [[0,1],[1,2],[45,20],[0,1],[1,2],[45,20]]},
      { "name": ["Group 2","Sub Group 1"], "data" : [[0,1],[1,2],[45,20],[0,1],[1,2],[45,20]]},
      { "name": ["Group 2","Sub Group 2"], "data" : [[0,1],[1,2],[45,20],[0,1],[1,2],[45,20]]}
  ], // here the hierarchy is not limited to two sub groups.. it could be any number..
  "row group headers" : ["Group 1 Header", "Sub group Header"]
  }
  </code></pre>
  
  <p>It should be compiled to HTML like in this fiddle <a href="http://jsfiddle.net/RwdWq/">http://jsfiddle.net/RwdWq/</a></p>
  
  <p>And here is the code that I have written</p>
  
  <pre><code> var render = function(data){
      var formattedData = {};
      function returnRowsData( obj ) {
        return obj["Data for Table"];
      }
      function returnColsData(obj) {
        return obj["Column Headers"];
      }
      function rowLabels(obj) {
        return obj["row group headers"];
      }
      function bottomColLabels(obj) {
        return obj["Columns under subColumns"];
      }
      function simplifyCols(obj) {
        var reform = {
          table : {}
        }, bottomLabs = bottomColLabels(data);
        var y = 0;
        for(var i = 0, l = obj.length; i &lt; l; i++){
          var key = obj[i];
          key.push(bottomLabs);
          for (var j = 0, m = key.length; j &lt; m; j++) {
             var colspan = 1;
             for (var k = j + 1; k &lt; m; k++) {
                colspan *= key[k].length; 
             }
             reform.table[j] = reform.table[j] || [];
             if (j == 0) {
              y += colspan;
             }
             reform.table[j].push({
               span : colspan,
               data : key[j]
             });
            }
          }
          reform.count = y;
          return reform;
       }
       var formatted = simplifyCols( returnColsData( data[0]) ) || {};
       var cols = formatted.table;
       //console.log(cols);
       formattedData.cols = cols;
       var keys = Object.keys(cols).sort(function(a, b){
           return a - b;
       });
       var table = document.createElement('table');
       for (var i = 0, l = keys.length - 1; i &lt; l; i++) {
          var keyData = cols[keys[i]], tr = document.createElement('tr');
          if (i == 0) {
              var rLs = rowLabels(data[0]);
              for (var rL = 0; rL &lt; rLs.length; rL++) {
                var td = document.createElement('th');
                td.innerHTML = rLs[rL];
                  td.rowSpan = keys.length;
                  td.className = "rowLabel";
                  tr.appendChild(td);
              }
          }
          table.appendChild(tr);
          for (var j = 0, m = keyData.length; j &lt; m; j++) {
              var eleData = keyData[j].data;
              if(eleData instanceof Array){
               for (var k = 0, n = eleData.length; k &lt; n; k++) {
                 var td = document.createElement('td');
                 td.innerHTML = eleData[k];
                 td.colSpan = keyData[j].span;
                 td.className = "colHeaders";
                 tr.appendChild(td);
                }
               }else{
                 var td = document.createElement('td');
                 td.innerHTML = keyData[j].data;
                 td.colSpan = keyData[j].span;
                 td.className = "colHeaders";
                 tr.appendChild(td);
               }
          }
          table.appendChild(tr);
       }
       var tr = document.createElement('tr');
       var noOfbottomLabs = formatted.count ?  formatted.count / bottomLabs.length : bottomLabs.length;
                  for (var i = 1; i &lt;= noOfbottomLabs; i++) {
                      for (var j = 0; j &lt; bottomLabs.length; j++) {
                          var td = document.createElement('td');
                          td.innerHTML = bottomLabs[j];
                          td.className = "bottomLabs";
                          tr.appendChild(td);
                      }
                  }
                  table.appendChild(tr);
                  function setToValue(obj, value, path) {
                      var parent = obj;
                      for (var i = 0; i &lt; path.length - 1; i += 1) {
                          parent[path[i]] = parent[path[i]] || {}
                          parent = parent[path[i]];
                      }
                      parent[path[path.length-1]] = value;
                  }   
                  var rowsData = returnRowsData(data), tempRows = {}, tempArr = {};
                  for (var i = 0, l = rowsData.length; i &lt; l ; i++) {
                      var names = rowsData[i].name, _data  = rowsData[i].data;
                      setToValue(tempRows, _data, names);
                  }
                  var similiar = {};
                  for (var ele = 0, lent = rowsData.length; ele &lt; lent; ele++) {
                      var curD = rowsData[ele], tr = document.createElement('tr');
                      for (var i = 0; i &lt; curD.name.length; i++) {
                          var td = document.createElement('td');
                          td.innerHTML = curD.name[i] || "-";
                          td.setAttribute('val', curD.name[i]);
                          td.className = "rowHeader";
                          similiar[curD.name[i]] = 0;
                          tr.appendChild(td);
                      }
                      var merg = [];
                      merg = [].concat.apply( merg, curD.data);
                      for (var i = 0; i &lt; merg.length; i++) {
                          var td = document.createElement('td');
                          td.innerHTML = merg[i] || "-";
                          td.className = "tdData";
                          tr.appendChild(td);
                      }
                      table.appendChild(tr);
                      console.log(merg);
                  }
                  document.body.appendChild(table);
                  for (var text in similiar) {
                      var elements = document.querySelectorAll('[val="' + text + '"]');
                      elements[0].rowSpan = elements.length;
                      for (var j = 1; j &lt; elements.length; j++) {
                          var v = elements[j];
                          v.parentNode.removeChild(v);
                      }
                  }
          }
  </code></pre>
  
  <p>And currently it is working like this <a href="http://jsfiddle.net/RwdWq/3/">http://jsfiddle.net/RwdWq/3/</a></p>
  
  <p>How can I resolve this issue and page is going dead some times if data is big. Help me improve the performance and I want to check the possibility of making it without table.</p>