title: Best way to filter data on site
body: <p>I write a small application which shows restaurants and pubs. I want to add a function to filter data by category. I get data in my script from external *.json file. There are only two categories - "bar" and "restaurant".</p>
  
  <p>I would be very greatful if you can give me a hint about filtering in existing elements. After generation of cards with places you want to show only bars, so you click button "bars" and there are only bars on site, restaurants are hidden. </p>
  
  <pre><code>function updateData() {
  
      var results = document.getElementById("results");
  
      for (var i = 0; i &lt; places.length; i++) {
          results.innerHTML += '&lt;div class="result text-center"&gt;' +
              '&lt;img class="rest-img img-thumbnail" width="236" height="236" src="img/img1.jpg"&gt;' +
              '&lt;h2 class="rest-name"&gt;' + places[i].name + '&lt;/h2&gt;' +
              '&lt;p class="rest-category"&gt;' + places[i].category + '&lt;/p&gt;' +
              '&lt;p class="rest-address"&gt;' + places[i].address + '&lt;/p&gt;' +
              '&lt;i class="fa fa-beer" aria-hidden="true"&gt;&lt;/i&gt;&lt;p class="rest-beer-price"&gt;' + places[i].price + ' PLN&lt;/p&gt;';
      }
  }
  
  function showBars() {
      //Code to filter bars
  }
  
  var warsaw = document.getElementById("warsaw");
  warsaw.addEventListener("click", updateData);
  </code></pre>
  
  <p>Many thanks in advance for help!</p>