Implementing multiple filters for object arrays in Angular 8

Question

Implementing multiple filters for object arrays in Angular 8

On my current project, I am interested in implementing multiple filters.

The filters I want to use include price range, type, and uploaded date.

For uploaded date, I have a checkbox with options for Today, Last 2 days, Last 7 days, and Any.

When it comes to type, I have checkboxes for Type A, Type B, and Type C.

Price range will be a numeric value ranging from 20 to 100.

It is essential that all three filters work simultaneously using Angular's (change) method. When I update one filter, the subsequent filters should be applied based on the results of the previous filter, and so on.

You can view my project on stackblitz.

I am looking for a solution that allows all my filters to interact cohesively. Each filter change should affect the next filter in line, creating a seamless filtering experience.

javascript angular typescript

Answer 1

Answer №1

If you're tired of using multiple if conditions, I have a suggestion for you to streamline your code. Check out the updated version below (StackBlitz):

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

By keeping your filters in sync using arrays and the spread operator, you can simplify your code:

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, leverage getters and array filters to stay in sync with 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;
  }

Wishing you all the best!

Answer 2

If you're tired of using multiple if conditions, I have a suggestion for you to streamline your code. Check out the updated version below (StackBlitz):

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

By keeping your filters in sync using arrays and the spread operator, you can simplify your code:

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, leverage getters and array filters to stay in sync with 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;
  }

Wishing you all the best!

Answer 3

Answer №2

One effective approach in Angular is to leverage rxjs Observables and pipes for handling data and filtering, following the reactive programming paradigm. Check out this example on StackBlitz for reference

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

For the HTML implementation:

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">title</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.title }}</td>
            <td>{{data.price_range }}</td>
            <td>{{data.date | date: 'medium'}}</td>
            <td>{{data.type}}</td>
        </tr>
    </tbody>
</table>

Answer 4

One effective approach in Angular is to leverage rxjs Observables and pipes for handling data and filtering, following the reactive programming paradigm. Check out this example on StackBlitz for reference

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

For the HTML implementation:

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">title</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.title }}</td>
            <td>{{data.price_range }}</td>
            <td>{{data.date | date: 'medium'}}</td>
            <td>{{data.type}}</td>
        </tr>
    </tbody>
</table>

Implementing multiple filters for object arrays in Angular 8

Answer №1

Answer №2

Similar questions

Navigating through different components in React is made possible with React Router

Laravel and Vue: tackling pagination issues in a Vue.js and Laravel application

Issue with JSViews visible link and converter not functioning properly

Google maps are failing to display on the page when loading via ajax

Utilize generics to define the data type of the output

Insert well-formed JSON into an HTML element

Consecutive interdependent operations within a Vuex action

Guide to deploying Angular 17 in server-side rendering mode on Firebase

What could be causing the page to refresh every time a post or update is made using a mock REST API with JSON

Angular and Ionic collaborate by using ngFor to pass on the item.id during a (click) event

HTTP request form

When React object state remains unchanged, the page does not update automatically

"How to set the header in AngularJS when opening a new window with a GET request URL

Ways to remove items from Vuex store by utilizing a dynamic path as payload for a mutation

Encountering an issue with the message "chartobject-1.render() Error >> Unable to locate the container DOM element." within a JavaScript function

How about this: "Is it possible for the accordion to open when clicked and show

Expanding the outer div with Jquery's append() function to accommodate the inner div elements perfectly

send mouse event to component when clicked

Typescript: Extracting data from enum items using types

Numerous status buttons with a variety of background colors