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/
希望我回答了你的问题
我基本上有一个菜单系统,用户可以在其中单击商店名称并显示该商店的信息。
有效。
现在,我还有一个筛选器面板,用户可以在其中选择根据单击的筛选器按钮对菜单列表进行排序。我这辈子都想不通。
如何使用数组函数创建一个数组,该数组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/ 希望我回答了你的问题