How to filter JSON table with Select

Question

I have a table that is populated by data in a JSON table and I would like to be able filter the table based on options in a select menu. How would I go about this?

JSON File is formatted like so, with categories having different numbers

"products" : [
{
  "id" : "0",
  "name" : "Logitech G910 Orion Spectrum RGB Mechanical Gaming Keyboard - 
   UK-Layout",
  "price" : "119.99",
  "category" : "0",
  "description" : "Logitech 920-008017 G910 Orion Spectrum RGB Mechanical 
   Gaming Keyboard - Black.",
  "button" : "<button type='button'>Add</button>",
  "input" : "<input type='text' name='quantity'>",
  "images" : [
    {
      "id" : "0",
      "src" : "images/00.jpg"
    },
    {
      "id" : "1",
      "src" : "images/01.jpg"
    },
    {
      "id" : "2",
      "src" : "images/02.jpg"
    }
  ]
}

Select menu:

`<select id= "dropDown">
 <option value="">All</option>
 <option value="0">Mice</option>
 <option value="1">Keyboard</option>
 <option value="2">Monitor</option>
 </select>`

Table

<table id =myTable class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Price</th>
          <th>Description</th>
          <th>Image</th> 
        </thead>
        </table>
      </table>

Script for table

$.getJSON('products.json', function(data){
  var items = [];
  $.each(data.products, function(key, val){
    items.push("<tr>");
    items.push("<td id=''"+key+"''>"+val.id+"</td>");
    items.push("<td id=''"+key+"''>"+val.name+"</td>");
    items.push("<td id=''"+key+"''>"+val.price+"</td>");
    items.push("<td id=''"+key+"''>"+val.description+"</td>");
    items.push("<td id=''"+key+"''>"+"<img src='"+val.image+"'/></td>");

    items.push("</tr>");
  });

  $("<tbody/>", {html:items.join("")}).appendTo("table");
});

Answer 1

I would use the data attribute to filter the desired rows.

To do so, first identify each row with a data-category attribute, by changing the line items.push("<tr>") with this:

items.push("<tr data-category='"+val.category+"'>");

Then, when the dropdown is changed, call this function:

function filterByCategory(obj){
    var id = $(obj).val(); // get currently selected value
    $('tr[data-category]').hide(); // first hide all rows
    $('tr[data-category='+id+']').show(); // show only those rows with the requested category id
}

To invoke the function:

<select id="dropDown" onchange="javascript:filterByCategory(this)">
 <option value="">All</option>
 <option value="0">Mice</option>
 <option value="1">Keyboard</option>
 <option value="2">Monitor</option>
</select>

I'm using this model all the time with success, so unless there are typos it should work, let me know otherwise.