サイトのデータをフィルタリングする最良の方法

Question

私はレストランやパブを示す小さなアプリケーションを書いています。私はカテゴリ別にデータをフィルタリングする関数を追加したいと思います。外部* .jsonファイルからスクリプトのデータを取得します。 「バー」と「レストラン」の2つのカテゴリしかありません。

既存の要素をフィルタリングするヒントを教えていただければ幸いです。あなただけのバーを表示する場所を持つカードの生成後、ボタン "バー"をクリックし、サイト上にバーがあるので、レストランは隠されています。

function updateData() { 

    var results = document.getElementById("results"); 

    for (var i = 0; i < places.length; i++) { 
     results.innerHTML += '<div class="result text-center">' + 
      '<img class="rest-img img-thumbnail" width="236" height="236" src="img/img1.jpg">' + 
      '<h2 class="rest-name">' + places[i].name + '</h2>' + 
      '<p class="rest-category">' + places[i].category + '</p>' + 
      '<p class="rest-address">' + places[i].address + '</p>' + 
      '<i class="fa fa-beer" aria-hidden="true"></i><p class="rest-beer-price">' + places[i].price + ' PLN</p>'; 
    } 
} 

function showBars() { 
    //Code to filter bars 
} 

var warsaw = document.getElementById("warsaw"); 
warsaw.addEventListener("click", updateData); 

多くのお手伝いをいただきありがとうございます。 filterコマンドがtrueのリターンを除外するものと虚偽を維持することを期待

function filterByCategory(list, category) { 
    return list.filter(function(item) { 
    return (item.category === category); 
    }); 
} 

：

Answer 1

最も簡単なのはfilter機能付きです。

Answer 2

フィルタリングする必要のある各アイテムのルートを、そのカテゴリを表すクラスに与えます。次に、results要素で、表示する必要がある各カテゴリのクラスを追加または削除します。次に、それぞれのクラスがresultsに存在するときに要素のカテゴリのみを表示するCSSを追加するだけです。

このアプローチではJSがほとんど必要ありませんでした。表示の更新は、CSSによって完全に処理されます。 JSは、クラスをresultsに切り替えるためにのみ必要です。

あなたの質問に関連していない

document.getElementById("foo").addEventListener("click", function() { 
 
    document.getElementById("results").classList.toggle("foo") 
 
}) 
 
document.getElementById("bar").addEventListener("click", function() { 
 
    document.getElementById("results").classList.toggle("bar") 
 
})

#results .item { 
 
    display: none; 
 
} 
 

 
#results.foo .fooCat { 
 
    display: block; 
 
    color: green; 
 
} 
 
#results.bar .barCat { 
 
    display: block; 
 
    color: blue; 
 
}

<button id=foo>TOGGLE FOO</button> 
 
<button id=bar>TOGGLE BAR</button> 
 

 
<div id=results> 
 
<p class="item fooCat">FOO ITEM</p> 
 
<p class="item fooCat">FOO ITEM</p> 
 
<p class="item barCat">BAR ITEM</p> 
 
<p class="item fooCat">FOO ITEM</p> 
 
<p class="item barCat">BAR ITEM</p> 
 
<p class="item barCat">BAR ITEM</p> 
 
<p class="item fooCat">FOO ITEM</p> 
 
</div>