Filter an array of objects using an Observable filter

Question

I'm struggling to figure the correct way to filter an array of objects using RxJS 6.

Here's the scenario. I have users: User[], filter: FormControl, and another array of filteredUsers: User[]. What I would like to do is filter the list the users based on the value contained in the filter. The only way I was able to figure this out was to use tap, and while this works, it just doesn't seem like the right way to do it...plus the whole list is "filtered out" until the filter control has its first valueChange.

this.filter.valueChanges.pipe(
  tap((term) => {
    this.filteredUsers = this.users.filter(u => u.name.indexOf(term) != -1)
  })).subscribe()

Any help would be greatly appreciated.

bryan60 · Accepted Answer · 2019-01-23 22:47:18Z

you're right that tap isn't the "right" way to do it... the right way is to do it in subscribe...

this.filter.valueChanges.pipe(startWith('')).subscribe(
  (term) => {
    this.filteredUsers = (term) ? this.users.filter(u => u.name.indexOf(term) != -1) : this.users;
});

and add in a blank check that doesn't filter, and a start with that kicks off the stream. done and done. Don't add complexity where you don't need it. rxjs recommends side effects occur in your subscribe function, everything else SHOULD be transformative / functional, and setting a value on the controller is a side effect.

If you want to get really reactive, you can throw in an async pipe for good measure

this.filteredUsers$ = this.filter.valueChanges.pipe(startWith('')).tap(
  (term) => {
    return (term) ? this.users.filter(u => u.name.indexOf(term) != -1) : this.users;
});

then in HTML instead of

*ngFor="let user of filteredUsers"

do:

*ngFor="let user of filteredUsers$ | async"

the benefit here is automatic subscription cleanup and better support for onpush change detection.

Kaizen Programmer · Accepted Answer · 2019-01-23 22:38:52Z

0

Just move the tap function into the subscribe:

this.filter.valueChanges.subscribe((term) => {
    this.filteredUsers = this.users.filter(u => u.name.indexOf(term) != -1)
  });

answered Jan 23, 2019 at 22:38

Kaizen Programmer

3,8181 gold badge16 silver badges30 bronze badges

Collectives™ on Stack Overflow

Filter an array of objects using an Observable filter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related