Javascript 过滤并动态更改附加结果？

我将尽可能简单地解释这一点

我有一个来自如下对象的数据列表：

let burgers = [
   {
       "storeSpace": "Open Space",
       "storeName": "Five Guys",
         "storeImage": "images/burgers/five-guys.png",
         "storeLocation": "865 York Mills Rd, North York, ON M3B 1Y6",
         "storeHours": "Hours: 11:00AM - 10:00PM"
     },
    {
        "storeSpace": "Crowded",
         "storeName": "Rudy",
        "storeImage": "images/burgers/rudy.png",
        "storeLocation": "619 College St, Toronto, ON M6G 1B5",
         "storeHours": "Hours: 11:00AM - 10:00PM"
      },
      {
         "storeSpace": "Crowded",
         "storeName": "The Burger's Priest",
         "storeImage": "images/burgers/burger-priest.png",
        "storeLocation": "463 Queen St W, Toronto, ON M5V 2A9",
         "storeHours": "Hours: 11:00AM - 10:00PM",
         "pricing": true
      },
      {
         "storeSpace": "Open Space",
        "storeName": "Le Swan",
        "storeImage": "images/burgers/le-swan.png",
        "storeLocation": "892 Queen St W, Toronto, ON M6J 1G3",
         "storeHours": "Hours: 11:00AM - 10:00PM",
         "pricing": true
     },
     {
         "storeSpace": "Open Space",
         "storeName": "Le Swan",
         "storeImage": "images/burgers/le-swan.png",
         "storeLocation": "892 Queen St W, Toronto, ON M6J 1G3",
         "storeHours": "Hours: 11:00AM - 10:00PM"
      }
]

该信息通过一个空html字符串显示，如下所示：

var html = '';
function displayItems(obj, parent){
         var uniqueID = 0;
        obj.forEach(function(val){
            html += '<div class="food-section" onclick="compareModule(\'compare-food-gui\')" compare_id=' + uniqueID + '>';
            html += '<div class="food-thumb">';
            html += '<img src="'+ val.storeImage +'" width="168" height="112"/>';
            html += '</div>';
            html += '<div class="food-info" compare_id=' + uniqueID + '>';
            html += '<p class="store-capacity">'+ val.storeSpace +'</p>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-unfilled.png" height="17" width="17" class="store-rating"/>';
            html += '<p id="store-name" compare_id=' + uniqueID + '>'+ val.storeName +'</p>';
            html += '<p class="store-desc" compare_id=' + uniqueID + '>'+ val.storeLocation +'</p>';
            html += ' <p class="store-desc">Hours: 11:00AM - 10:00PM</p>';
            html += '</div>';
            html += '</div>';
        });
         let div = document.createElement('div');
         div.classList.add('cart-item');
         div.innerHTML = html;
         document.getElementById(parent).appendChild(div);
 }
 displayItems(burgers,"burgers");

所以我将其设置为检查定价是否等于t，表示一种过滤选项。在本例中，在“五”含义下，项目在$5以下

接下来，我在其中一个项目的对象中添加了定价：超过五个

然后在html中，我添加了

onclick="displayItems(burgers,'burgers', 'underfive')">

在过滤器按钮旁边，如果我点击它；它确实会相应地过滤出结果，但我如何为每一个更改管理这些结果

我将不得不为html结果编写大约10次重复的代码。所以我知道这不是正确的解决方案

就像我很确定我不会写一样

ifx=1{ 复制粘贴结果代码 }

否则，如果x=2{ 复制粘贴结果代码 }

---

等等等等。我想要一个可以动态执行的函数。

您需要为每个汉堡项目设置价格、等级和大小属性，以便可以将其过滤掉

需要全局筛选器对象/数据来跟踪筛选器。 根据您的代码片段，您的呈现函数已被修改为过滤burgers（如果存在任何过滤器），并且在呈现burgers元素之前，它需要清除之前包含的所有内容

单击该复选框将更改全局过滤器对象并调用渲染函数

让汉堡=[ { 储藏空间：开放空间， 店名：五个人， storeImage：https://www.seriouseats.com/recipes/images/2015/07/20150702-sous-vide-hamburger-anova-primary-1500x1125.jpg, 店址：北约克约克米尔斯路865号，M3B 1Y6， 营业时间：营业时间：上午11:00-晚上10:00， 价格：五美元以下 }, { 店面：拥挤， 店名：鲁迪， storeImage:images/burgers/rudy.png， 店址：多伦多大学街619号，M6G 1B5， 营业时间：营业时间：上午11:00-晚上10:00， 价格：五点二十分 }, { 店面：拥挤， 店名：汉堡店的牧师， storeImage:images/burgers/burger-price.png， 店址：多伦多皇后大道西463号，M5V 2A9， 营业时间：营业时间：上午11:00-晚上10:00， 定价：正确 }, { 储藏空间：开放空间， 店名：乐天鹅， storeImage:images/burgers/le-swan.png， 店址：多伦多皇后大道西892号，M6J 1G3， 营业时间：营业时间：上午11:00-晚上10:00， 定价：正确 }, { 储藏空间：开放空间， 店名：乐天鹅， storeImage:images/burgers/le-swan.png， 店址：多伦多皇后大道西892号，M6J 1G3， 营业时间：营业时间：上午11:00-晚上10:00 } ] //全局筛选变量 变量过滤器={ 价格：【】， 尺寸：[]， 评级：[] } 函数更改筛选器类型，值，已选中{ //如果选中，则更改 //如果选中==true，则添加到全局筛选器对象 //否则从全局筛选器对象中删除 ifchecked筛选器[类型].pushvalue else筛选器[type]。拼接筛选器[type]。indexOfvalue，1 显示项目：汉堡、汉堡、过滤器 } 函数displayItemsobj，父项，myfilter{ //如果存在过滤器，则首先过滤汉堡 var filteredBurgers=obj.filterburger=> Object.keysmyfilter.every key=>myfilter[key]。长度==0 | | myfilter[key]。includesburger[key] //在呈现项之前清除父元素的元素 document.getElementByIdparent.innerHTML= var html=； var uniqueID=0； filteredBurgers.forEachfunctionval{ html+=； html+=； html+=； html+=； html+=； html+='

'+val.storeSpace+'

'； html+=； html+=； html+=； html+=； html+=； html+='

'+val.storeName+'

'； html+='

'+val.storeLocation+'

'； html+='

营业时间：上午11:00-晚上10:00

； html+=； html+=； }; 让div=document.createElement'div'； div.classList.add'cart-item'； div.innerHTML=html； document.getElementByIdparent.appendChilddiv； } 显示物品，汉堡，过滤器； 定价 低于5.00美元 $5.00 - $27.00 超过27美元 分量大小 低于5.00美元 $5.00 - $27.00 超过27美元 评级 低于5.00美元 $5.00 - $27.00 超过27美元 显示所有35家店铺

---

我只能看到项目数组、渲染函数和过滤器部分。请提供一些代码，你是如何尝试得到你想要的结果的。我提供了我所尝试的。虽然它可以这样工作，但如果不为每种过滤器类型重新绘制相同的代码块，它是没有好处的！不，但谢谢你的帮助：

function displayItems(obj, parent, t){
         var t = t;
            if(obj[y].pricing === t){

onclick="displayItems(burgers,'burgers', 'underfive')">