过滤现场数据的最佳方式答案

【问题标题】：Best way to filter data on site过滤现场数据的最佳方式
【发布时间】：2017-03-20 09:24:35
【问题描述】：

我编写了一个显示餐馆和酒吧的小应用程序。我想添加一个按类别过滤数据的功能。我从外部 *.json 文件中获取脚本中的数据。只有两个类别 - “酒吧”和“餐厅”。

如果您能给我一些关于过滤现有元素的提示，我将非常感激。在生成带有您只想显示酒吧的地方的卡片后，您单击“酒吧”按钮，现场只有酒吧，餐厅被隐藏。

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

非常感谢您的帮助！

【问题讨论】：

与您的问题无关，但请使用results.insertAdjacentHTML("beforeend", ...your HTML...) 使用 HTML 标记添加新元素。使用results.innerHTML += ... 会遇到很多问题。
我会记住的，谢谢！

标签： javascript function filtering

【解决方案1】：

最简单的是使用filter函数：

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

filter 命令期望返回 true 以保留内容，并返回 false 以排除。

【讨论】：

【解决方案2】：

给每个需要过滤的项目的根一个代表它们的类别的类。然后让results 元素为应该显示的每个类别添加或删除一个类。然后只需添加一些 CSS，当相应的类存在于 results 时，它只显示元素的类别。

这种方法几乎不需要 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>

【讨论】：