Selectを使用してJSONテーブルをフィルタする方法

Question

JSONテーブルのデータで表が作成されているため、選択メニューのオプションに基づいてテーブルをフィルタ処理できるようにしたいと考えています。私はこれについてどうやって行くのですか？

JSONファイルはカテゴリが異なる番号

を持って、そのようにフォーマットされ

"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メニュー：テーブルの

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

表

<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> 

スクリプト

$.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

データ属性は、というデータ属性を使用して目的の行をフィルタリングします。ドロップダウンが変更されたときに、この関数を呼び出し、そして

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

：

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 
} 

第一これに伴いitems.push("<tr>")を変更することにより、データ・カテゴリ属性で各行を識別し、そうする

私はこのモデルのアルを使用してい

<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> 

：

は、関数を呼び出すには私は成功した時だから、打ち間違いがなければそれ以外のことを教えてください。