title: Build dynamic table from JSON
body: <p>I've been stuck trying to build this dynamic table for the past couple of days.  I've built it out several different ways and have finally gotten it to a point where I have the correct output, however the work I've done is manual.  I am hoping someone could help me make this be more dynamic.</p>
  
  <p>here's an example of my JSON (super simplified)</p>
  
  <pre><code>var obj1 = {
  "Summary" : 
  [
  {
      "ID" : "1234", 
      "Name" : "John", 
      "Status" : "Green",
  },
  {
      "ID" : "5678", 
      "Name" : "Mike", 
      "Status" : "Green",
  },
  {
      "ID" : "9012", 
      "Name" : "Tom", 
      "Status" : "Red",
  },
  {
      "ID" : "3456", 
      "Name" : "Chris", 
      "Status" : "Red",
  },
  {
      "ID" : "2445", 
      "Name" : "Pat", 
      "Status" : "Green",
  },
  {
      "ID" : "6543", 
      "Name" : "James", 
      "Status" : "Red",
  }
  
  ]
  };
  </code></pre>
  
  <p>I need the output to look something like this (which it is), however I may have more than 6 objects in my array, so I need to iterate through this rather than build it out by hand.</p>
  
  <pre><code>1234   5678    9012    3456    2445    6543
  John   Mike     Tom    Chris   Pat     James
  Green  Green   Red     Red     Green   Green
  </code></pre>
  
  <p>Here's my code thus far.  Any help would be much appreciated.</p>
  
  <pre><code>for (j in obj1.Summary[0]) {
  document.write('&lt;tr&gt;&lt;td class="' + j +'"&gt;' + j + '&lt;/td&gt;&lt;td class="' + j +'"&gt;' +     obj1.Summary[0][j] + '&lt;/td&gt;&lt;td class="' + j +'"&gt;' + obj1.Summary[1][j] + '&lt;/td&gt;&lt;td class="' + j +'"&gt;' + obj1.Summary[2][j] + '&lt;/td&gt;&lt;td class="' + j +'"&gt;' + obj1.Summary[3][j] + '&lt;/td&gt;&lt;td class="' + j +'"&gt;' + obj1.Summary[4][j] + '&lt;/td&gt;&lt;td class="' + j +'"&gt;' + obj1.Summary[5][j] + '&lt;/td&gt;&lt;/tr&gt;');
  }
  </code></pre>