How much to filter an array of objects?

Question

This is my demo code:

//Imports and decorators up here for Angular 2 export class ProductsListComponent { products = [ { name: "A", color: "Blue", size: 50 }, { name: "B", color: "Blue", size: 60 }, { name: "C", color: "Black", size: 70 } ]; filters = { colors: ["Blue", "Black"], sizes: [70, 50] }; //This is my first approach but just works for the colors array inside filters object //and i have no ideia how to filter sizes too filterProducts() { let results = []; this.filters.colors.forEach((color) => { this.products.filter((product) => { if (product.color === color) { results.push(product); } return true; //filter callback requires a boolean }) }); console.log(results); } } 

I would like the results array to look like this: filters :

 var results = [ { "name": "A", "color": "Blue", "size": 50 }, { "name": "C", "color": "Black", "size": 70 } ]; 

I hope to explain my problem well.

Answer 1

here is an example using each and some array methods:

 var products=[ {"name":"A","color":"Blue","size":50}, {"name":"B","color":"Blue","size":60}, {"name":"C","color":"Black","size":70} ]; var filters={ color:["Blue","Black"], size:[70,50] }; var r = products.filter(x => Object.keys(filters).every(f => filters[f].some( z => z == x[f] ))) console.log(r) 

Answer 2

You can rewrite the function as follows

 filterProducts(){ let results=[], filersCopy = angular.copy(this.filters.colors); this.products.filter((product)=>{ //checking in filters.colors collection using indexOf let index = filersCopy.indexOf(product.color); if(index > -1){ //removing matched element from copy, to ensure single occurence filersCopy.splice(index, 1); results.push(product); return true; } }); console.log(results); //Printing filtered results } 

Answer 3

I recommend renaming the filters properties in the same way as the products properties, because in this way you can implement a function that dynamically checks all filter criteria.

 export class ProductsListComponent { products = [ { name: "A", color: "Blue", size: 50 }, { name: "B", color: "Blue", size: 60 }, { name: "C", color: "Black", size: 70 } ]; filters = { color: ["Blue", "Black"], //renamed size: [70, 50] //renamed }; filterProducts() { let filterKeys = Object.keys(this.filters); // filters all elements passing the criteria return this.products.filter((item) => { // validates all filters criteria dynamically return filterKeys.every((key) => { // eg filters[color].indexOf(item[color]) return (this.filters[key].indexOf(item[key]) !== -1); }); }); } } 

You can run the following test:

 var products = [ { name: "A", color: "Blue", size: 50 }, { name: "B", color: "Blue", size: 60 }, { name: "C", color: "Black", size: 70 } ]; var filters = { color: ["Blue", "Black"], size: [70, 50] }; function filterProducts() { let filterKeys = Object.keys(filters); return products.filter((item) => { return filterKeys.every((key) => { return (filters[key].indexOf(item[key]) !== -1); }); }); } var filtered = filterProducts(); console.log(filtered);