Return 包含过滤嵌套数组的新对象

Return new Object that includes filtered nested array

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

有效。

现在,我还有一个筛选器面板,用户可以在其中选择根据单击的筛选器按钮对菜单列表进行排序。我这辈子都想不通。

如何使用数组函数创建一个数组,该数组returns 一个新对象也有更新的菜单?

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 个,但 returns 整个项目列表。

这是一张图片:https://i.imgur.com/jOHkB6a.png 如您所见,那次我将最大金额设置为 3 美元,对象中只有 1 项低于 3 美元,但它 returns 整个菜单列表。这就是为什么我需要以某种方式更新当前菜单项。

代码如下:

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

这是您要找的吗?也 link 到 jsfiddle https://jsfiddle.net/vrheL4tw/1/ 希望我回答了你的问题