title: Create a Table using JSON data from an API using Pure Javascript
body: <p>I am currently using Jquery to populate a table with data from an API, but I want to do it without requiring any external libraries, is there a way to do this using pure javascript?</p>
  
  <p>I currently use the following solution:</p>
  
  <pre><code>$.ajax({
  url: 'http://localhost:2672/api/notes',
  type: 'GET',
  success: function (myNotes) {
      console.log(myNotes)
      // EXTRACT VALUE FOR HTML HEADER. 
      var col = [];
      for (var i = 0; i &lt; myNotes.length; i++) {
          for (var key in myNotes[i]) {
              if (col.indexOf(key) === -1 &amp;&amp; (key === 'title' || key === 'content' || key == 'category')) {
                  col.push(key);
              }
          }
      }
  
      // CREATE DYNAMIC TABLE.
      var table = document.createElement("table");
  
      // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
  
      var tr = table.insertRow(-1); // TABLE ROW.
  
      for (var i = 0; i &lt; col.length; i++) {
          var th = document.createElement("th"); // TABLE HEADER.
          th.innerHTML = col[i];
          tr.appendChild(th);
      }
  
      // ADD JSON DATA TO THE TABLE AS ROWS.
      for (var i = 0; i &lt; myNotes.length; i++) {
  
          tr = table.insertRow(-1);
  
          for (var j = 0; j &lt; col.length; j++) {
              var tabCell = tr.insertCell(-1);
              tabCell.innerHTML = myNotes[i][col[j]];
          }
      }
  
      // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
      var divContainer = document.getElementById("showNotes");
      divContainer.innerHTML = "";
      divContainer.appendChild(table);
  }
  });
  </code></pre>