[英]Javascript filter parent array based on child containing value
I am trying to filter the parent array products
based on the selected value which should be contained as the child.我正在尝试根据应作为子项包含的选定值过滤父数组
products
。 For example in my case I was trying to get all the product objects as an array which contained the string "iphone".例如,在我的情况下,我试图将所有产品对象作为一个包含字符串“iphone”的数组。 It is not working for me and I can't seem to locate my error.
它对我不起作用,我似乎无法找到我的错误。 Please may someone help.
请有人帮忙。
What I have tried:我试过的:
const selected = 'iphone'
const products = [
{
id: "4irnflpd0",
productItem: [ "iphone", "ipad", "kindle"],
},
{
id: "glrscb1m3s9k",
productItem: ["airpods","iphone",],
},
{
id: "uumkugk3jxof",
productItem: ["macbook","cable"]
},
]
var filtered = products.map(o=>{
o = Object.assign({},o); //Clone the object. So any changes will not affect the original array.
o.productItem.map(p=>{ //Use map to loop thru the products
p = p.filter(v=>v === selected); //Filter the products which include selected
});
return o;
})
Expected array output:预期阵列 output:
const products = [
{
id: "4irnflpd0",
productItem: [ "iphone", "ipad", "kindle"],
},
{
id: "glrscb1m3s9k",
productItem: ["airpods","iphone",],
},
]
You can use the filter()
methods on products array and find if the selected item is available in the productItems
您可以在 products 数组上使用
filter()
方法并查找所选项目是否在productItems
中可用
const selected = 'iphone' const products = [ { id: "4irnflpd0", productItem: [ "iphone", "ipad", "kindle"] }, { id: "glrscb1m3s9k", productItem: ["airpods","iPhone",] }, {id: "uumkugk3jxof", productItem: ["macbook","cable"] } ] var filtered = products.filter(product => product.productItem?.includes(selected)); console.log(filtered);
Just a simple filter()
method should work for us in this case.在这种情况下,只需一个简单的
filter()
方法就可以为我们工作。 T further simplify, we can also use object restructuring, so instead of writing product.productItem.includes(selected)
, we'll only need to write productItem.includes(selected)
. T 进一步简化,我们也可以使用 object 重组,所以我们只需要写
product.productItem.includes(selected)
,而不是写productItem.includes(selected)
。
All we have to do is filter
the source array by which items include the selected
value:我们所要做的就是
filter
包含selected
值的项目的源数组:
const selected = 'iphone'; const products = [ { id: "4irnflpd0", productItem: ["iphone", "ipad", "kindle"] }, { id: "glrscb1m3s9k", productItem: ["airpods", "iphone", ] }, { id: "uumkugk3jxof", productItem: ["macbook", "cable"] }, ]; const filtered = products.filter(({productItem}) => productItem.includes(selected)); console.log(filtered);
If you'd prefer not to use Object destructuring, just swap that filter line for this more traditional one:如果您不想使用 Object 解构,只需将该过滤线换成这个更传统的过滤线:
products.filter(p => p.productItem.includes(selected))
If you're not sure that every single item in your array will have the productItem
key, then you should use optional chaining to prevent an error being thrown.如果您不确定数组中的每个项目都将具有
productItem
键,那么您应该使用可选链接来防止引发错误。 This is as simple as adding ?
这就像添加一样简单
?
before after property name.在属性名称之前。 Here it is all put together:
这里全部放在一起:
products.filter(p => p.productItem?.includes(selected))
First of all no need to make a copy since with map function you allocated the result to new variable without changing the new array So you need to do this首先不需要复制,因为使用 map function 您将结果分配给新变量而不更改新数组所以你需要这样做
const filtered = products.map(p=>{
return p.productItem.includes(selected)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.