title: Populate HTML table with JSON data
body: <p>We would be grateful for some guidance, [we are early into coding] and have looked at lots of examples but can cannot get our JSON to import into the table.</p>
  
  <p>At that moment we have the table data in-line however a correctly formatted JSON file is now available and automatically updates and we want to load it into the table on the fly when the page is loaded. </p>
  
  <p>This is an example of what were currently use:</p>
  
  <pre><code>&lt;div&gt;
  &lt;p&gt; *** OTHER STUFF HERE ***&lt;p/&gt;
      &lt;table id="gable"&gt;
          &lt;colgroup&gt;
              &lt;col class="twenty" /&gt;
              &lt;col class="fourty" /&gt;
              &lt;col class="thirtyfive" /&gt;
              &lt;col class="twentyfive" /&gt;
          &lt;/colgroup&gt;
          &lt;tr&gt;
              &lt;th onclick="sortTable(0)"&gt;&lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;&amp;nbsp&amp;nbspCOUNTRY&lt;/th&gt;
              &lt;th onclick="sortTable(1)"&gt;&lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;&amp;nbsp&amp;nbspLOCATION&lt;/th&gt;
              &lt;th onclick="sortTable(2)"&gt;&lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;&amp;nbsp&amp;nbspBALANCE&lt;/th&gt;
              &lt;th onclick="sortTable(3)"&gt;&lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;&amp;nbsp&amp;nbspDATE&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;script&gt;
  var data = [
      { "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },
      { "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":"18/05/2018" },
      { "COUNTRY":"PL", "LoC":"Kraków", "BALANCE":"12,362", "DATE":"22/06/2018" },
      { "COUNTRY":"AU", "LoC":"Townsville", "BALANCE":"7,569", "DATE":"1/07/2018" },
      { "COUNTRY":" ", "LoC":"BALANCE:", "BALANCE":"142,072", "DATE":" " }
  ];
  var table = document.getElementById('gable');
  data.forEach(function(object) {
      var tr = document.createElement('tr');
      tr.innerHTML = '&lt;td&gt;' + object.COUNTRY + '&lt;/td&gt;' +
          '&lt;td&gt;' + object.LoC + '&lt;/td&gt;' +
          '&lt;td&gt;' + object.BALANCE + '&lt;/td&gt;' +
          '&lt;td&gt;' + object.DATE + '&lt;/td&gt;';
      table.appendChild(tr);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>There are a lot more lines of data, the table has CSS styling and applies the sortTable(n) function to the Headers. It displays perfectly, looks and functions like we want,</p>
  
  <p>We've Googled [lots] and tried various load / populate scripts and attempted to get the example on w3schools working - <a href="https://www.w3schools.com/js/js_json_html.asp" rel="nofollow noreferrer">https://www.w3schools.com/js/js_json_html.asp</a> - alas we're fairly new to this. </p>
  
  <p>Our JSON file /assets/sample.JSON is correctly formatted and meets the requirements.</p>
  
  <p>How do we do a simple import of the JSON to populate the table id="gable"?</p>