title: Add Array Objects to HTML Table
body: <p>I am trying to add objects to this set of HTML code. </p>
  
  <pre><code>&lt;div id="output"&gt;
  &lt;table id="presidents"&gt;
      &lt;tr&gt;
          &lt;th&gt;President&lt;/th&gt;&lt;th&gt;Took office&lt;/th&gt;&lt;th&gt;Left office&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ul>
  <li><p>Write a function displayTable(presidents) which takes an array of
  president objects. Each president object has the properties name,
  tookOffice, leftOffice.</p></li>
  <li><p>For each president add a row to the table with id "presidents"</p></li>
  <li>Place the name in the first column, tookOffice in the second column, 
  and leftOffice in the third column.</li>
  </ul>
  
  <p>So far this is as close as I have gotten:</p>
  
  <pre><code>var x = document.getElementById('President');
  var y = document.getElementById('Took Office');
  var z = document.getElementById('Left Office');
  
  function displayTable(presidents) {
      var presArray = [{
          name: 'W',
          tookOffice: '2000',
          leftOffice: '2008'
      }, {
          name: 'Obama',
          tookOffice: '2008',
          leftOffice: '2016'
      }];
      for (var i = 0; i &lt; presArray.length; i++) {
          x = +presArray[i].name;
          y = +presArray[i].tookOffice;
          z = +presArray[i].leftOffice;
      }
  }   
  </code></pre>