title: how to print json object in my table?
body: <p>I am trying to print my object that holds my inputName field and my inputDate field. I am successfully storing both variables onto my localStorage but I am unable to print it in my table. I am proving a picture to a better understanding. I tried to use console.log but It doesn't print anything in the console. I guess I do not know how to use console log.</p>
  
  <p>What I am trying to do is the following : once an user inputs a name and date, I want to be able to display those values to my table.</p>
  
  <p><a href="https://i.stack.imgur.com/aralM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aralM.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function SortByKey(array,key){
   return array.sort(function(a,b){
  
   var x = a[key];
   var y = b[key];
  
   return ((x&lt;y)?-1:((x&gt;y)?1:0));
  });
  
  
  
  }
  
  
  /* This function will save my input onto Local Storage*/
  function getInput(){
  var nameInput = document.getElementById('inputName').value;
  localStorage.setItem('Name', nameInput);
  
  var dateInput = document.getElementById( 'inputDate').value;
  localStorage.setItem('Date', dateInput);
  }
   
  
  
  
  
  function SubmitInput() {
  
  var JsObject =[];
  var nameInput = document.getElementById('inputName').value;
  var dateInput = document.getElementById('inputDate').value;
  
  if (localStorage.getItem('datastorage')!=undefined) {
   var JsObject = JSON.parse(localStorage.datastorage);
  }
  
  JsObject.push({'inputName':nameInput, 'inputDate':dateInput});
  localStorage.setItem('datastorage',JSON.stringify(JsObject));
   //console.log(JsObject);
  print();
  
  }
  
  
  function print (){
  
  var JsObject = JSON.parse(localStorage.getItem('datastorage'));
  var clean = " ";
  document.getELementByID('myTable').inner.HTML=clean;
  for (var i = 0; I &lt; JsObject.length; i++) {
    
  document.getElementById('myTable').innerHTML += "&lt;tr&gt;" + "&lt;td&gt;" + JsObject[i].nameInput + "&lt;/td&gt;" +  "&lt;td&gt;" + JsObject[i].dateInput + "&lt;/td&gt;" + "&lt;/tr&gt;";
  //console.log(JsObject);
      
  
  }
  
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt;
  table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
  }
  
  td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
  }
  
  tr:nth-child(even) {
      background-color: #dddddd;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table id="myTable"  &gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Date&lt;/th&gt;
      &lt;th&gt;Endorsement&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  
    
  &lt;form class="form-horizontal"&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Endorse me&lt;/legend&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="col-lg-2 control-label"&gt;Name&lt;/label&gt;
        &lt;div class="col-lg-10"&gt;
          &lt;input onCLick ="getInput()" type="text" class="form-control" id="inputName" placeholder="Name"&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label class="col-lg-2 control-label"&gt;Date&lt;/label&gt;
        &lt;div class="col-lg-10"&gt;
          &lt;input onCLick="getInput()" type="text" class="form-control" id="inputDate" placeholder="Date"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;div class="col-lg-10 col-lg-offset-2"&gt;
          &lt;button onClick="SubmitInput()" type="submit" class="btn btn-primary" &gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/fieldset&gt;
  &lt;/form&gt;
  
  
  
  
  &lt;/head&gt;
  
  &lt;script&gt;
  $(document).ready(function () {
  $('.dropdown-toggle').dropdown();
  });
  &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>