Question

我基本上有一个菜单系统，用户在其中单击商店名称，并显示该商店的信息。

可行。

现在，我还有一个过滤器面板，用户可以在其中基于单击的过滤器按钮对菜单列表进行排序。我一生无法解决这个问题。

如何使用数组函数创建一个数组，该数组返回一个具有更新菜单的新对象？

burgers.forEach(function(e){
    e.menu.filter (el => el.itemPrice < 3).map(el => {
        if(el.itemPrice < 3){
            console.log(el);
        }
    });
})

当我登录（e）时，所有汉堡店都存储小于5的菜单项。我想创建一个新对象，该对象具有原始文档中的所有信息，但应修改菜单部分以仅显示较少的项目超过5美元。

对象：

let burgers = [
    {
    "storeSpace": "Open Space",
    "storeName": "Mcdonalds",
    "menu": [
        {
            "itemImage": "https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/header/en/mcdonalds-hamburger.jpg?$Product_Desktop$",
            "itemName": "Hamburger",
            "itemPrice": 2.99,
        },
       {
            "itemImage": "https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/header/en/mcdonalds-hamburger.jpg?$Product_Desktop$",
            "itemName": "Hamburger",
            "itemPrice": 3.99,
        },
        {
            "itemImage": "https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/header/en/mcdonalds-hamburger.jpg?$Product_Desktop$",
            "itemName": "Hamburger",
            "itemPrice": 6.99,
        },
        ]
    },
]

如果我再次调用该对象，它的确包含少于$ 5的项目，但它还会显示我不想要的所有其他菜单项目。它应该只显示前2个，但会返回整个项目列表。

以下是图片：https://i.imgur.com/jOHkB6a.png 如您所见，那一次我将最大金额设置为$ 3，而对象中只有一项低于$ 3，但它返回了整个菜单列表。这就是为什么我需要以某种方式更新当前菜单项的原因。

Answer 1

这是代码：

const newBurgersMenu = burgers.map(function(burger){
    const newMenu = burger.menu.filter(function(item){
    if(item.itemPrice < 5){
        return item 
    }
  })
  return newMenu;
})

// First way to create new burgers
const newBurgersObj = [{...burgers[0], menu:newBurgersMenu[0]}]
// OR Second way to create new burgers
const newBurgers = burgers.slice()
newBurgers[0].menu = newBurgersMenu

console.log({newBurgersObj})
console.log({newBurgers})

这就是您要寻找的东西。还链接到jsfiddle https://jsfiddle.net/vrheL4tw/1/ 希望我回答了你的问题

返回包含过滤后的嵌套数组的新对象

1 个答案: