Question

这是我的演示代码：

//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);
  }

}

根据results：

，我希望filters数组看起来像这样

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

我希望能很好地解释我的问题。

Answer 1

这是一个使用每个和一些数组方法的例子：

＆＃13;

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)

＆＃13;

Answer 2

您可以将功能重写为以下

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

我建议将filters属性重命名为products属性，因为这样您就可以实现动态验证所有过滤条件的函数。

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) => {
        // e.g. filters[color].indexOf(item[color])
        return (this.filters[key].indexOf(item[key]) !== -1);
      });
    });
  }

}

您可以运行以下测试：

＆＃13;

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);

＆＃13;

如何多重过滤一组对象？

3 个答案: