title: Filtering JSON table displayed in HTML using Javascript - All values disappear
body: <p>I have created a table in HTML from a JSON file which contains an index, name and price for several games. I need to allow the user to filter through the values by typing a name i.e. "Counter Strike: Global Offensive" into a search box.</p>
  
  <p>The problem I am encountering now is that when I type anything into the search bar the table disappears entirely. I have been trying different solutions for some time now and can't seem to figure out what's going wrong. The index, name and price headings also disappear. </p>
  
  <p>The following is my Javascript, first the function for populating the table, followed by the one which is meant to be filtering the table. </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>$.getJSON("http:.../steamcrawler.json",
      function (data) {
      document.getElementById("data").innerHTML;
      var tr;
      for (var i = 0; i &lt; data.length; i++) {
          tr = $('&lt;tr/&gt;');
          tr.append("&lt;td&gt;" + data[i].index + "&lt;/td&gt;");
          tr.append("&lt;td&gt;" + data[i].Game + "&lt;/td&gt;");
          tr.append("&lt;td&gt;" + data[i].Price + "&lt;/td&gt;");
          $('table').append(tr);
      }
      });
  
      function myFunction() {
        var input, filter, table, tr, td, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("data");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i &lt; tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[0];
          if (td) {
           if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
              tr[i].style.display = "";
            } else {
             tr[i].style.display = "none";
            }
          }       
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name"&gt; &lt;table id="data"&gt;&lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am not getting any error messages before or after typing in the search box. The complete table is displayed before typing, and disappears entirely as soon as I type a character into the bar. The following is the HTML for the table and the search bar.</p>
  
  <p>Any help would be appreciated, i'm quite new to Javascript and different aspects of this project have been giving me headaches for weeks!</p>