title: Creating a table using key/values stored in Chrome storage
body: <p>I'm trying to create a table using JSON in Chrome.sync.storage. Here's what I have in storage-</p>
  
  <pre><code>"06-02-2018" : {"end" : "22:04", "start" : "22:04", "tasks" : "hello world"}
  "18-02-2018" : {"end" : "1:05", "start" : "2:04", "tasks" : "hello world"}
  "22-03-2018" : {"end" : "11:03", "start" : "15:04", "tasks" : "hello world"}
  </code></pre>
  
  <p>Here's what I'm trying to achieve- </p>
  
  <pre><code>var storage = chrome.storage.sync;
  
  function generateTable() {
      var table = document.createElement('table');
  
      storage.get(null, function (items) {
  
          var allKeys = Object.keys(items);
  
          // For every date in table,
          for (var i = 0; i &lt; allKeys.length; ++i) {
  
              var currentKey = allKeys[i];
  
              var tr = document.createElement('tr');
              storage.get([currentKey], function(result){
  
                  // For every set of keys for a date,
                  $.each(result, function(date,details){
                      var td = document.createElement('td');
                      td.appendChild(document.createTextNode(date));
                      tr.appendChild(td);
  
                      $.each(details, function(key,value){
                          var tdTemp = document.createElement('td');
                          tdTemp.appendChild(document.createTextNode(value));
                          tr.appendChild(tdTemp);
                      });
  
                      table.appendChild(tr);
                      console.log(tr);
                  });
  
              }); 
          }
      });
  
      console.log(table);
      document.body.appendChild(table);
  }
  </code></pre>
  
  <p>Problem is- Instead of having a single row for each date &amp; 4 cells for each row, the table only has a single row with 12 cells. It looks like it could be due to Asynchronous behavior of chrome storage. Any suggestions? </p>