Multiple filters on an array of objects Angular 8

Question

I would like to use multiple filters on my project.

I use 3 filters : price range , type , uploaded date.

Uploaded_date : is a checkbox , with three fields : Today, Last 2 days , Last 7 days, Any.

Type : is a checkbox, that has three checkbox : type A, Type B, Type C.

Price range : is a number range between 20 and 100.

My three filters should work in the same time with Agular (change) Method. if i update my first filter , and update next filter , filters should be applied on results of the first filter and like that for the rest .

my stackblitz

Is there a way to make all my filters work together. for every filter i change . the next one should apply on the previous one and like that for the rest.

here's my stackblitz stackblitz.com/edit/angular-fk1jqd?embed=1&file=src/app/… thank you — Ayoub
– Ayoub, Commented Aug 2, 2020 at 12:03

invernomuto · Accepted Answer · 2020-08-02 14:18:33Z

Instead of using multiple if conditions I suggest to you to update your code as follow (StackBlitz).

vehiculeFilter: any[] = [];
postedWithinFilter: any[] = [];

Keep in sync your filters with the power of arrays and spread operator:

onChangeUploadedDate($event, duration) {
    const checked = $event.target.checked;
    if(checked) {
      this.postedWithinFilter = [...this.postedWithinFilter, {...duration}];
    } else {
      this.postedWithinFilter = [...this.postedWithinFilter.filter(x => x.id !== duration.id)];
    }
  }

onChangeVehicule($event, vehiculeType) {
    const checked = $event.target.checked;
    if(checked) {
      this.vehiculeFilter = [...this.vehiculeFilter, {...vehiculeType}];
    } else {
      this.vehiculeFilter = [...this.vehiculeFilter.filter(x => x.id !== vehiculeType.id)];
    }
  }

then use the power of getters and array filter to keep in sync your UI:

public get filteredData(): any[] {
    let filtered = [...this.datas];

    if(this.postedWithinFilter.length > 0) {
      filtered = filtered.filter(x => {
        const p = this.postedWithinFilter.find(v => {
          const d = new Date();
          d.setDate(d.getDate()-(v.value));
          const tDate = new Date(x.date);
          return tDate >= d;
        });
        return p != null;
      });
    }

    if(this.vehiculeFilter.length > 0 ) {
      filtered = filtered.filter(x => {
        const t = this.vehiculeFilter.find(v => v.name === x.type);
        return t != null;
      });
    }
    return filtered;
  }

all the best

Eric Aska · Accepted Answer · 2020-08-02 15:50:05Z

1

You might consider using rxjs Observables and pipes for data and filtering which is the normal reactive way to go in Angular . https://stackblitz.com/edit/angular-vwtnmt?embed=1&file=src/app/app.component.html

  private data$ = new BehaviorSubject<Data[]>([]);
  dataWithFilters$: Observable<Data[]> = this.data$.pipe(
    this.vehicleTypeFilter,
    this.dateOptionsFilter,
    this.priceFilter
  );
  get vehicleTypeFilter() {...}
  get dateOptionsFilter() {...}
  get priceFilter() {...}

HTML:

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">titre</th>
            <th scope="col">price range</th>
            <th scope="col">date</th>
            <th scope="col">type</th>
        </tr>
    </thead>
    <tbody *ngFor="let data of (dataWithFilters$ | async)">
        <tr>
            <th scope="row">{{data.id }}</th>
            <td>{{data.titre }}</td>
            <td>{{data.price_range }}</td>
            <td>{{data.date | date: 'medium'}}</td>
            <td>{{data.type}}</td>
        </tr>
    </tbody>
</table>

edited Aug 2, 2020 at 15:50

answered Aug 2, 2020 at 15:44

Eric Aska

6465 silver badges15 bronze badges

3 Comments

Ayoub Over a year ago

Working with pipes in my case is better. Thanks Man !

Taieb Over a year ago

@Could you please update the stack link ?

Eric Aska Over a year ago

@Taieb Sorry, I couldn't find it. :(

Collectives™ on Stack Overflow

Multiple filters on an array of objects Angular 8

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related