title: How to iterate through property names of Javascript object?
body: <p>I would like to get the property names from a Javascript object to build a table dynamically.  Example:</p>
  
  <pre><code>var obj = {'fname': 'joe', 'lname': 'smith', 'number': '34'};
  
  for (var i = 0; i &lt; obj.properties.length; i++) {
    alert(' name=' + obj.properties[i].name + ' value=' + obj.properties[i].value);
  }
  </code></pre>
  
  <p>would alert:</p>
  
  <pre><code>name=fname value=joe
  
  name=lname value=smith
  
  name=number value=34
  </code></pre>
  
  <p>Then I could build a table using object like this:</p>
  
  <pre><code>var obj = { 'players': [ 
       { 'fname': 'joe', 'lname': 'smith', 'number': '34'} , 
       { 'fname': 'jim', 'lname': 'Hoff', 'number': '12'} , 
       { 'fname': 'jack', 'lname': 'jones', 'number': '84'}   
  ] };    
  </code></pre>
  
  <p>to produce:</p>
  
  <pre><code>| fname |  lname |  number |
  |-------|--------|---------|
  | joe   | smith  |      34 |
  | jim   | Hoff   |      12 |
  | jack  | jones  |      84 |
  </code></pre>
  
  <h2>UPDATE</h2>
  
  <p>Thanks to the answer, I have produced a table from the Javascript objects using the property names from the first object in the list for the headers:</p>
  
  <pre><code>    function renderData() {
          var obj = { 'players': [
              { 'fname': 'joe', 'lname': 'smith', 'number': '34' },
              { 'fname': 'jim', 'lname': 'jones', 'number': '12' },
              { 'fname': 'jack', 'lname': 'Hoff', 'number': '84' } 
              ] };
  
          var cols = GetHeaders(obj); 
  
          $('#Output').html(CreateTable(obj, cols));
      }
  
      function CreateTable(obj, cols) {
          var table = $('&lt;table&gt;&lt;/table&gt;');
          var th = $('&lt;tr&gt;&lt;/tr&gt;');
          for (var i = 0; i &lt; cols.length; i++) {
              th.append('&lt;th&gt;' + cols[i] + '&lt;/th&gt;');
          }
          table.append(th);
  
          for (var j = 0; j &lt; obj.players.length; j++) {
              var player = obj.players[j];
              var tr = $('&lt;tr&gt;&lt;/tr&gt;');
              for (var k = 0; k &lt; cols.length; k++) {
                  var columnName = cols[k];
                  tr.append('&lt;td&gt;' + player[columnName] + '&lt;/td&gt;');
              }
              table.append(tr);
          }
          return table;
      }
  
      function GetHeaders(obj) {
          var cols = new Array();
          var p = obj.players[0];
          for (var key in p) {
              //alert(' name=' + key + ' value=' + p[key]);
              cols.push(key);
          }
          return cols;
      }
  </code></pre>