我有一个包含产品信息的对象数组,其中有类别和颜色作为字段。现在,我有另一个数组,其中包含要显示的类别和颜色。
主阵列:
products: [{
id: 1,
name: 'Product 1',
category: 'Home',
skill: 'Easy',
color: 'blue',
price: 100.00
}, {
id: 2,
name: 'Product 2',
category: 'Home',
skill: 'Intermediate',
color: 'red',
price: 120.00
}, {
id: 3,
name: 'Product 3',
category: 'Office',
skill: 'Intermediate',
color: 'green',
price: 190.00
}, {
id: 4,
name: 'Product 4',
category: 'Office',
skill: 'Advanced',
color: 'blue',
price: 260.00
}, {
id: 5,
name: 'Product 5',
category: 'Warehouse',
skill: 'Advanced',
color: 'white',
price: 321.00
}, {
id: 6,
name: 'Product 6',
category: 'Farm',
skill: 'Intermediate',
color: 'red',
price: 120.00
}, {
id: 7,
name: 'Product 7',
category: 'Space',
skill: 'Advanced',
color: 'green',
price: 150.00
}, {
id: 8,
name: 'Product 8',
category: 'Bathroom',
skill: 'Easy',
color: 'black',
price: 9.00
}],
我的另一个包含过滤器选项的数组:
selectedFilters: {
categories : ["home", "bathroom"] ,
colors : ["blue", "red"]
}
现在我希望输出为:
[{
id: 1,
name: 'Product 1',
category: 'Home',
skill: 'Easy',
color: 'blue',
price: 100.00
}, {
id: 2,
name: 'Product 2',
category: 'Home',
skill: 'Intermediate',
color: 'red',
price: 120.00
}]
我尝试了普通的数组过滤方法:
this.filteredProducts = this.products.filter(prod => {
// [prod.category, prod.color].some(val => this.selectedFilters.includes(val))
console.log(this.selectedFilters);
for (let i = 0; i < this.selectedFilters.length; i++) {
// console.log('Selected Category : ', this.selectedFilters[i]);
// console.log('Product Category : ', prod.category);
if (prod.category == this.selectedFilters[i]) {
console.log('Called category');
return true;
} else if (prod.color == this.selectedFilters[i]) {
console.log('Called color');
return true;
} else {
console.log('Called else');
continue;
}
}
});
如何使用数组滤波器函数或Lodash函数实现此目的?
答案 0 :(得分:4)
不需要库,使用标准.filter
方法过滤数组,检查每个对象的颜色和类别是否包含在selectedFilters对象中:
const products = [{
id: 1,
name: 'Product 1',
category: 'Home',
skill: 'Easy',
color: 'blue',
price: 100.00
}, {
id: 2,
name: 'Product 2',
category: 'Home',
skill: 'Intermediate',
color: 'red',
price: 120.00
}, {
id: 3,
name: 'Product 3',
category: 'Office',
skill: 'Intermediate',
color: 'green',
price: 190.00
}, {
id: 4,
name: 'Product 4',
category: 'Office',
skill: 'Advanced',
color: 'blue',
price: 260.00
}, {
id: 5,
name: 'Product 5',
category: 'Warehouse',
skill: 'Advanced',
color: 'white',
price: 321.00
}, {
id: 6,
name: 'Product 6',
category: 'Farm',
skill: 'Intermediate',
color: 'red',
price: 120.00
}, {
id: 7,
name: 'Product 7',
category: 'Space',
skill: 'Advanced',
color: 'green',
price: 150.00
}, {
id: 8,
name: 'Product 8',
category: 'Bathroom',
skill: 'Easy',
color: 'black',
price: 9.00
}];
const selectedFilters = {
categories : ["home", "bathroom"] ,
colors : ["blue", "red"]
};
const { categories, colors } = selectedFilters;
const filteredProducts = products.filter(({ category, color }) => (
categories.includes(category.toLowerCase()) && colors.includes(color.toLowerCase())
));
console.log(filteredProducts);