基本上我想实现一个多属性过滤器,它将过滤对象阵列,所以我开始创建一个函数multiFilter,接受一个过滤器对象,该对象将从可以选择多属性的最终用户中选择,如 品牌 颜色 名称
这个函数帮助我传递作为[arg1]的产品数组,并将对象过滤为[arg2],其中包含需要由最终用户过滤的值
function multiFilter(array, filters) {
let filterKeys = Object.keys(filters);
// filters all elements passing the criteria
return array.filter((item) => filterKeys.every((key) => (filters[key].indexOf(item[key]) !== -1)));
}
let products =
[
{ name: "A", color: "pruple", size: 50 , brand : "nike", vendor : 'vendor 1 ' },
{ name: "A", color: "orange", size: 60 , brand : "nike", vendor : 'vendor 2 ' },
{ name: "A", color: "orange", size: 40 , brand : "nike", vendor : 'vendor 1 ' },
{ name: "A", color: "red", size: 50 , brand : "nike", vendor : 'vendor 1 ' },
{ name: "A", color: "red", size: 50 , brand : "nike", vendor : 'vendor 1 ' },
{ name: "A", color: "black", size: 50 , brand : "nike", vendor : 'vendor 1 ' },
{ name: "A", color: "black", size: 50 , brand : "nike", vendor : 'vendor 1 ' },
{ name: "B", color: "pruple", size: 50 , brand : "zara", vendor : 'vendor 2 ' },
{ name: "B", color: "orange", size: 60 , brand : "zara", vendor : 'vendor 2 ' },
{ name: "B", color: "orange", size: 40 , brand : "zara", vendor : 'vendor 2 ' },
{ name: "B", color: "red", size: 50 , brand : "zara", vendor : 'vendor 2 ' },
{ name: "B", color: "red", size: 50 , brand : "zara", vendor : 'vendor 2 ' },
{ name: "B", color: "black", size: 50 , brand : "zara", vendor : 'vendor 2 '},
{ name: "B", color: "black", size: 50 , brand : "zara", vendor : 'vendor 2 ' },
]
let filters = {
name : ["A","B"],
brand : ['nike','zara'],
color: ["orange", "red" , 'black'],
size: [40 , 70 , 50]
};
var filtered = multiFilter(products, filters);
console.info('Filtered');
console.log(filtered);
you can find the clear code screenshot from here !
The console result here ! 我的问题在这里如何将这个javascript逻辑转换为Angular 5
如何制作管理过滤器对象的复选框输入,并将检查过的输入传递给处理我的产品过滤器的多重过滤功能
so i started to implement that but can't solve it any help ! - check stackbitz