Angular 7 filter array

Question

I have the following Angular component:

  private json: JsonResponseDTO;

  constructor(private dtoService: PoolDTOServiceService) {
  }

  ngOnInit() {
    this.dtoService.setJsonResponse();
    this.getPool();
  }

  getPool() {
    this.json = this.dtoService.jsonResponse;
  }

The json contains an element pools, that is an array. This one should be filtered by name, which is typed in an input. (I don not show the HTML, since this is not relevant).
I want to be able to 'remove' my search criteria, so the initial approach is:

  private json: JsonResponseDTO;
private filterJson: JsonResponseDTO;

  constructor(private dtoService: PoolDTOServiceService) {
  }

  ngOnInit() {
    this.dtoService.setJsonResponse();
    this.getPool();
  }

  getPool() {
    this.json = this.dtoService.jsonResponse;
    this.filterJson = this.json;
  }

  filter(filterCriteria: String) {
    this.filterJson = this.json;
    this.filterJson.pools.filter((element) => element.name === filterCriteria);
  }

and then bind the filterJson to the HTML DOM.
Is there a cleaner way to do this? I want to avoid requesting the new JSON each time the filtered name is 'removed', since the data is expensive in time to fetch.

I want to know if someone sees a cleaner way, because copying an array seems not right to me — ItFreak
– ItFreak, Commented Jan 17, 2019 at 9:11
If you don't want to request new JSON then filter is the only option you can do. — Sneha Pawar
– Sneha Pawar, Commented Jan 17, 2019 at 9:14
here is many copying of json response. why it is so? try to use observable with behaviour subject in service. so when you need you can filter this at the component side. — Ilan
– Ilan, Commented Jan 17, 2019 at 9:16
the clean way i think is to add a get method on the backend that take filterCriteria as parameter and try to add pagination — Fateh Mohamed
– Fateh Mohamed, Commented Jan 17, 2019 at 9:16

Akshay Rajput · Accepted Answer · 2019-01-17 09:31:43Z

3

You can use a pipe for filtering it will be much cleaner, just add the pipe in front of *ngFor directive.

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(value: any, field: string, input: string) {
    if (input !== undefined && input.length >= 2) {
      input = input.toLowerCase();
      if (typeof value[0] === 'string') {
        return value.filter(function(el: any) {
          return el.toLowerCase().indexOf(input) > -1;
        });
      }
      return value.filter(function(el: any) {
        return el[field].toLowerCase().indexOf(input) > -1;
      });
    }
    return value;
  }
}

Add this pipe, and in HTML where ever you need to filter

<div *ngFor="let val of filterJson | filter: "filterCriteria""> </div>

from change detection and performance point of view, pipes are awesome. Hope this helps, all the best

answered Jan 17, 2019 at 9:31

Akshay Rajput

2,0781 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akshay Rajput Over a year ago

@DhananjaiPai lol no, since the DOM needs to be rendered once the list is updated its much more economical to handle this via pipes, (Pipes are pure, managing change detection via same is much more easier)

Dhananjai Pai · Accepted Answer · 2019-01-17 09:16:05Z

1

filter(filterCriteria: String) {
    this.filterJson = {...this.json, pools: pools.filter((element) => element.name === filterCriteria);
}

You could potentially write it a bit cleaner by using spread and changing the pools property as above.

I'm assuming you should keep a cached copy of the original 'this.json' for a case when the filters are reset.

answered Jan 17, 2019 at 9:16

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

2 Comments

ItFreak Over a year ago

yea, thats my primary concern, how to 'restore' the original when the filter is removed

Dhananjai Pai Over a year ago

Again, assuming you are using filterJson to display the pool in the UI and you want to get the original data back when filter is cleared, you can simply do this.filterJson = {...this.json} to revert back to the original response and have angular rerender

Collectives™ on Stack Overflow

Angular 7 filter array

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related