Javascript ES6/Typescript:根据其他数组中的项筛选对象数组?
我有一个对象数组,它描述了一组图表类型。每一个都是相同的格式Javascript ES6/Typescript:根据其他数组中的项筛选对象数组?,javascript,arrays,typescript,ecmascript-6,Javascript,Arrays,Typescript,Ecmascript 6,我有一个对象数组,它描述了一组图表类型。每一个都是相同的格式 { name: 'Donut Chart', category: ['comparisons'], subcategory: ['proportions'] }, 您可以看到,每个图表都有一系列可以匹配的类别和子类别 我有两组复选框,“类别”和“子类别”。单击其中一个复选框,将所选类别添加到selectedCategories的数组中,并显示子类别列表及其自己的复选框 如上所述,选择子类别时,会将所选子类别添加到数组se
{
name: 'Donut Chart',
category: ['comparisons'],
subcategory: ['proportions']
},
您可以看到,每个图表都有一系列可以匹配的类别和子类别
我有两组复选框,“类别”和“子类别”。单击其中一个复选框,将所选类别添加到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>
-
{{cat.filter}}
-
{{subcat.filter}
图表
-
{{chart.name}
基于我对问题的理解和一些假设,我认为代码将需要以下内容
charts
的变量中,则
charts.filter(chart =>
selectedCategories.every(c => chart.category.includes(c))
&& selectedSubcategories.every(sc => chart.subcategory.includes(sc))
)