title: jQuery append to HTML table
body: <p>I am trying to populate a blank table with data returned from Ajax request. The table populates inside the correct columns, but all the data data is clumped up (in a long string) and all the interest rate data is clumped up (in a long string). Despite this the <code>Console.log()</code> line works perfect and shows each item, enumerated, all on seperate lines.  </p>
  
  <p>My code is below:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;table id="table" border="1"&gt;
      &lt;tr&gt;
          &lt;th&gt;Date&lt;/th&gt;
          &lt;th&gt;Value&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id='col1'&gt;&lt;/td&gt;
          &lt;td id='col2'&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>Javascript/jQuery</p>
  
  <pre><code>$.getJSON("api", function(data) {
       for (var x =1; x &lt;= data.count -1 ; x++){
           $("#col1").append(data.observations[x].date);
           $("#col2").append(data.observations[x].value);
           console.log(x, data.observations[x].date, data.observations[x].value);
        }
   })
  </code></pre>
  
  <p>How can I rewrite it so that each date and interest rate is on a seperate row. Example: row1:date1 and value1, row2: date2 and value2, etc.. </p>
  
  <p>P.S. Answer should include <code>$.getJSON(api, data)</code> 
        and 
  NOT included <code>$.parseJSON(data)</code> or <code>$.each(data))</code> or <code>success: function (data))</code></p>