ES6 / Typescript: фильтрация массива объектов на основе элементов в других массивах?

Question

У меня есть массив объектов, который описывает группу типов диаграмм. Каждый из них имеет формат

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

Вы можете видеть, что у каждого графика есть массив категорий и подкатегорий, которым он может соответствовать.

У меня есть 2 набора флажков, «категории» и «подкатегории». Нажатие на один из этих флажков добавляет выбранную категорию в массив selectedCategories и отображает список подкатегорий с собственными флажками.

Когда подкатегория выбрана, как указано выше, это добавляет выбранную подкатегорию в массив 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>

Answer 1

Исходя из моего понимания вопроса и нескольких предположений, я думаю, что для кода понадобится следующее ..

1. Цикл по списку диаграмм.
2. Просмотр выбранных категорийявляется подмножеством категории каждой диаграммы.
3. Проверка, является ли selectedSubcategories подмножеством подкатегории каждой диаграммы.
4. Фильтрация диаграмм, для которых 3 и 4 верны.

Если список графиков находится в переменной с именем charts, то

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