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

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 个，但它会返回整个项目列表。

这是一张图片:/image/zZE45.png 正如您所看到的，当时我将最大金额设置为 3 美元，对象中只有 1 个项目低于 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/ 希望我回答了你的问题