ES6/Typescript：根据其他数组中的项目过滤对象数组？答案

【问题标题】：ES6/Typescript: Filtering array of objects based on items in other arrays?ES6/Typescript：根据其他数组中的项目过滤对象数组？
【发布时间】：2019-02-13 04:14:33
【问题描述】：

我有一个对象数组，它描述了一组图表类型。每一个都是格式

{
  name: 'Donut Chart',
  category: ['comparisons'],
  subcategory: ['proportions']
},

您可以看到每个图表都有一个可以匹配的类别和子类别数组。

我有 2 组复选框，“类别”和“子类别”。单击其中一个复选框会将所选类别添加到 selectedCategories 数组中，并显示一个子类别列表，以及它们自己的复选框。

When a subcategory is chosen, as above, this adds the chosen subcategory to an array selectedSubcategories.

此时，我想显示与所选类别（在数组 selectedCategories 中）和子类别（在数组 selectedSubcategories 中）匹配的图表类型列表。

我已经创建了这个（工作）逻辑来显示复选框并从 2 个数组中添加/删除项目，但我不清楚如何为 chartsToDisplay 创建一个过滤器，它将在页面上显示所选图表。

categories = [
  { name: 'Comparisons', filter: 'comparisons', selected: false },
  { name: 'Composition', filter: 'relationships', selected: false },
  { name: 'Distribution', filter: 'distribution', selected: false },
  { name: 'Individual Metric', filter: 'individual-metric', selected: false },
  { name: 'Relationships', filter: 'relationships', selected: false }
];

subcategories = [
  { name: 'Data over Time', filter: 'data-over-time', selected: false },
  { name: 'Patterns', filter: 'patterns', selected: false },
  { name: 'Location', filter: 'location', selected: false },
  { name: 'Proportions', filter: 'proportions', selected: false }
];

selectedCategories = [];
selectedSubcategories = [];
chartsToDisplay = [];

categorySelect(category) {
  if (category.selected) {
    this.selectedCategories.push(category.filter);
  } else {
    // remove un-checked item from the array
    let toDel = this.selectedCategories.indexOf(category.filter);
    this.selectedCategories.splice(toDel, 1);
  }

  if (!this.selectedCategories.length) {
    this.subcategories.forEach(function(value, index) {
      value.selected = false;
    });
  }
}

subcategorySelect(subcategory) {
  if (subcategory.selected) {
    this.selectedSubcategories.push(subcategory.filter);
  } else {
    // remove un-checked item from the array
    let toDel = this.selectedSubcategories.indexOf(subcategory.filter);
    this.selectedSubcategories.splice(toDel, 1);
  }

}

我尝试只使用子类别，但我没有得到任何结果：

filterCharts(subcats) {
  this.displayedCharts = this.chartTypes.filter(c => c.subcategory === subcats);
}

在这种情况下可能并不重要，但这是我用于测试的 HTML：

<ul>
  <li *ngFor="let cat of categories">
    <input type="checkbox"
          [(ngModel)]="cat.selected"
          (ngModelChange)="categorySelect(cat)"> {{cat.filter}}
  </li>
</ul>

<ul *ngIf="selectedCategories.length">
  <li *ngFor="let subcat of subcategories">
    <input type="checkbox"
          [(ngModel)]="subcat.selected"
          (ngModelChange)="subcategorySelect(subcat)"> {{subcat.filter}}
  </li>
</ul>

<h2>Charts</h2>
<ul>
  <li *ngFor="let chart of displayedCharts">
    {{chart.name}}
  </li>
</ul>

【问题讨论】：

标签： javascript arrays typescript ecmascript-6

【解决方案1】：

根据我对问题的理解和一些假设，我认为代码将需要以下内容..

循环浏览图表列表。
查看 selectedCategories 是否是每个图表类别的子集。
查看 selectedSubcategories 是否是每个图表子类别的子集。
过滤掉 3 和 4 为真的图表。

如果图表列表位于名为charts 的变量中，则

charts.filter(chart =>
    selectedCategories.every(c => chart.category.includes(c))
    && selectedSubcategories.every(sc => chart.subcategory.includes(sc))
)

【讨论】：