title: Create table from JSON object in JavaScript
body: <p>I am trying to create an HTML table with information I use to draw a plot.
  I don't want to query the database twice, and I want to create the chart and a table with the information.
  This is what I get from the server and that it gets charted:</p>
  
  <pre><code>var data = {
                "selector":"#charttotalday",
                "jsondata":[
                   {
                      "label":"Client1",
                      "data":[
                              [1382670000000,110157],
                              [1382756400000,199055],
                              [1382842800000,362996],
                              [1382929200000,302],
                              [1383015600000,169],
                              [1383102000000,88],
                              [1383188400000,49]
                              ],
                      "points":{
                         "fillColor":"#88bbc8"
                      }
                   },
                   {
                      "label":"Client2",
                      "data":[
                              [1382670000000,58611],
                              [1382756400000,112268],
                              [1382842800000,193060],
                              [1382929200000,115],
                              [1383015600000,45],
                              [1383102000000,65],
                              [1383188400000,18]
                              ],
                      "points":{
                         "fillColor":"#ed7a53"
                      }
                   },
                   {
                      "label":"Client3",
                      "data":[
                              [1382670000000,65534],
                              [1382756400000,118362],
                              [1382842800000,200058],
                              [1382929200000,123],
                              [1383015600000,65],
                              [1383102000000,53],
                              [1383188400000,26]
                      ],
                      "points":{
                         "fillColor":"#9FC569"
                      }
                   }
                ]
             };
  </code></pre>
  
  <p>Because of the way the information is organized, I can not use $.each to loop over it and create a table of the format:</p>
  
  <pre><code>                Client1  Client2  Client3
  1382670000000 |  10157 |  58611 |  65534 | 
  1382756400000 |  99055 |  12268 |  18362 |
  1382842800000 |  62996 |  93060 |  10058 |
  1382929200000 |    302 |    115 |    123 |
  1383015600000 |    169 |     45 |     65 |
  1383102000000 |     88 |     65 |     53 |
  1383188400000 |     49 |     18 |     26 |
  </code></pre>
  
  <p>I am thinking that the best way would be to read the object and create a new one with the structure that I need, that can be used with $.each.</p>
  
  <p>I have tried with this:</p>
  
  <pre><code>$.each(data.jsondata, function(key, value) {
      thead += '&lt;th&gt;' + value.label + '&lt;/th&gt;';
      tableData[value.label] = new Object();
      $.each(value.data, function(key1, value1) {
          $.each(value1, function(key2, value2) {
              if(key2 == 0) {
                  //here I have the time line, axis Y
                  index = value2;
              }
              if(key2 == 1) {
                  //here I have the values for the table
                  tableData[value.label][index] = value2;
              }
          });
      });
  });
  
  thead += '&lt;/tr&gt;';
  </code></pre>
  
  <p>But this only creates a more simple element with the information that I need, but still cant turn into what I need.</p>
  
  <p>Can someone please point me in the right direction?</p>