title: Using json array to populate html table
body: <p>I am using local storage to save an object. I am having troubles than using this object to populate a table. Right now the object is showing up as an array in the third column. How can I use the json array to fill column 1, column 2 and column 3 with the value, key and image from the object.</p>
  
  <pre><code>$(document).on('click', '[data-toggle=add]', function() {
      var latlng = $(this).data('latlng');
      var address = $(this).data('address');
      var image = $(this).data('image');
      var key = $(this).data('id');
      var testObject = {
        'latlng' : latlng,
        'address' : address,
        'image' : image
      };
      localStorage.setItem(key, JSON.stringify(testObject));
      updateTable();
  });
  
  function updateTable() {
      var tbody = document.getElementById("output");
      while(tbody.getElementsByTagName("tr").length &gt; 0) {
         tbody.deleteRow(0);
      }
      var row;
      if(localStorage.length == 0) {
         row = tbody.insertRow(i);
         cell = row.insertCell(0);
         cell.colSpan = "4";
         cell.innerHTML = "Nothing to Show";
      }
      for(var i = 0; i &lt; localStorage.length; ++i) {
          row = tbody.insertRow(i);
          cell = row.insertCell(0);
          cell.innerHTML = i;
          cell = row.insertCell(1);
          cell.innerHTML = localStorage.key(i)
          cell = row.insertCell(2);
          cell.innerHTML = localStorage.getItem(localStorage.key(i));
          cell = row.insertCell(3);
          cell.innerHTML = '&lt;button class="btn btn-danger btn-sm" onclick="deleteItem(\'' + localStorage.key(i) + '\');"&gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt; Delete&lt;/button&gt;';
      }
  }
  </code></pre>