javascript - 现场过滤数据的最佳方法

Question

我编写了一个显示餐馆和酒吧的小应用程序。我想添加一个按类别过滤数据的功能。我从外部 *.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);

非常感谢您的帮助!

Answer 1

最简单的是使用过滤器函数:

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

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