title: Converting JSON to a html table
body: <p>What i have done already is:
  I have written a php script which echos my JSON data structure. 
  I am now trying to write a Html script which will obtain the results in JSON format but echo this out in a html table below is my PHP Script and my Attempted HTM script.
  Any tips on how i can do this and i will be grateful.</p>
  
  <pre><code> &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Details B&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;meta name="robots" content="noindex, nofollow" /&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          JSONload();
      })
      function JSONload() {
          $('#results').empty();
          $('&lt;table id="table2" border="1"/&gt;').appendTo('#results');
          $.get("details.php",   {date1:$('#date_1').val(),date2:$('#date_2').val()}, function(result){
              for(elem in result[0])
                  $('&lt;th scope="col"&gt;'+elem+'&lt;/th&gt;').appendTo('#table2');
              for(var i = 0; i &lt;= result.length; i++) {
                  $('&lt;tr id="'+(i)+'" /&gt;').appendTo('#table2');
                  for(elem in result[i]) {
                      $('&lt;td&gt;'+result[i][elem]+'&lt;/td&gt;').appendTo('#'+i);
                  }
              }
          },'json');
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;
      &lt;div class="fixed"&gt;  
      &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br /&gt;
  &lt;table border="1"&gt;
    &lt;tr&gt;
          &lt;th scope="col"&gt;Key&lt;/th&gt;
          &lt;th scope="col"&gt;Value&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;    &lt;label for="date_1"&gt;Date as dd/mm/yyyy (date_1)&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;input name="date_1" type="text" class="larger" id="date_1" value="31/1/1970" size="12" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
            &lt;td&gt;&lt;label for="date_2"&gt;Date as dd/mm/yyyy (date_2)&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;input name="date_2" type="text" class="larger" id="date_2" value="31/1/1990" size="12" /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td&gt;List name of all cyclists with their country's name, gdp and population&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" onClick="JSONload()" name="submit" id="button" value="Submit"  class="larger" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
  
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div id="results" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>