How to multi 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 would look like this according to filters:

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

I hope to have explained my problem well.

Answer 1

here's an example using every 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 could rewrite function to following

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
}