angularangular-filters

Angular 4 data filter with multiple condition


I want to filter the data depending on multiple dropdowns(4 drop downs) selection.

I may choose any single dropdown or 2 dropdowns or multiple dropdowns. How can I add condition depending selection

this.gridData = this.dataProvider.filter(data => {
    return data.column1 == this.selectedFitler1
        && data.column2== this.selectedFitler2
        && data.column3 == this.selectedFitler3
        && data.column4 == this.selectedFitler4 })

Solution

  • let selectedFilter1 = ['val1a', 'val1b', 'va1e'];
    ...
    let selectedFilter4 = ['val4a', 'val4c'];
    
    this.gridData = this.dataProvider.filter(data => {
            return (selectedFilter1.findIndex(filterVal => filterVal === data.column1) !== -1 || selectedFilter1.length === 0)
                && selectedFilter2.findIndex(filterVal => filterVal === data.column2) !== -1 || selectedFilter2.length === 0)
                && selectedFilter3.findIndex(filterVal => filterVal === data.column3) !== -1 || selectedFilter3.length === 0)
                && selectedFilter4.findIndex(filterVal => filterVal === data.column4) !== -1 || selectedFilter4.length === 0)
        });
    

    or if you know the types of the columns and do not want to repeat yourself:

    isInSelected<T>(columnVal: T, filter: T[]): boolean {
        return filter.length === 0
            || filter.findIndex(filterVal => filterVal === columnVal) !== -1
    }
    

    and use it like this:

    this.gridData = this.dataProvider.filter(data => {
            return this.isInSelected<string>(data.column1, this.selectedFilter1)
                && this.isInSelected<number>(data.column2, this.selectedFilter2)
                && this.isInSelected<number>(data.column3, this.selectedFilter3)
                && this.isInSelected<string>(data.column4, this.selectedFilter4);
        });