根据多选下拉列表筛选对象列表 Javascript/Typescript/Lodash/Angular

Question

我遇到了一些复杂的问题，需要您的帮助。

我有多个下拉过滤器，例如位置、类别、子类别 e.t.c。我的初始版本适用于无论选择哪种组合，它都会 return 正确的结果。我的下一个挑战是使用 multi select 制作下拉菜单。我正在为此使用 firebase，试图在客户端进行复杂的过滤。

我有从数据库中得到的这样的对象列表：

{
 data1: {
     status: true,
     location: "New York",
     category: "Food",
     subcategory: "Pizza",
     price: 24
 }
 data2: {
     status: true,
     location: "Chicago",
     category: "Food",
     subcategory: "Hot Dogs",
     price: 5
 }
 data3: {
     status: true,
     location: "Miami",
     category: "Food",
     subcategory: "Taco",
     price: 2
 }
}

为了按多个值进行过滤，我有以下内容：

filter() {
  this.filteredData = _.filter(this.getListings, _.conforms(this.activeFilters)).filter(x => 
  x.status === true);
}

然后，我有一种方法可以根据条件设置活动过滤器，或者通过删除活动过滤器来显示属性中的所有内容，例如：

filterLocation() {
const location = this.filtersData.get('location').value;
this.locations = [];

for(let i = 0; i < location.length; i++) {
  if (location[i].itemName === 'All') {
    this.removeFilter('location');
  }

  if (location[i].itemName !== 'All') {
   this.locations.push(location[i].itemName);

   property = 'location';
   this.activeFilters[property] = val => this.locations.some(x => 
   val.includes(x));
   this.filter();
  }
}
}

然后，我对类别、子类别有相同或相似的方法e.t.c。

我现在想要实现的事情是，例如，如果需要，我想要多个 select 位置和类别或子类别，但不限于在将来添加更多属性。

因此，如果我选择纽约和迈阿密，我想获取包含这些值的所有项目，但如果我想按食品、饮料等其他值进行过滤，则不受限制 e.t.c.

此示例非常适合按单个值进行过滤，您可以根据需要添加任意数量的过滤器和组合，它始终 return 一个与您 select 从中匹配的对象数组下拉菜单。

我正在尝试一些东西，如果我设法解决了问题，我会更新问题，同时感谢所有帮助。谢谢

Answer 1

我想通了！我根据我的解决方案更新了 filterLocation() 方法。我现在打算改进过滤器。

根据多选下拉列表筛选对象列表 Javascript/Typescript/Lodash/Angular

filtering list of objects based on multi-selection dropdowns Javascript/Typescript/Lodash/Angular

javascript

filter

typescript

lodash

angular