Why do the RxJS filter method not work for me

Question

Having issues using RxJS operators the way they were intended to be used.

My endpoint returns Observable<Array<TaskReprintReasonCode>>

I then use the async pipe to subscribe to this observable.

this.reason$ = this.taskService.getTaskReprintReasonCodes();

This works great until i need to filter or map something out of that list of reasons.

this.reasons$ = this.taskService
  .getTaskReprintReasonCodes()
  .pipe(filter(r => r.reasonDescription === "New"));

I am guessing it has to do with the way I am defining the type coming back from the DB. Is it bad practice to be naming Observabe<INSERTTYPE[]>

You are accessing an array. You most likely want to use an array filter, looking at your code. Would a Observable map operator make more sense? this.reasons$ = this.taskService.getTaskReprintReasonCodes().pipe(map(rArray => rArray.filter(r => r.reasonDescription === 'New'))). — dewwwald
Is that what you needed t know? It seem like your conflating what filter is in RxJs with what filter is in an array. Arrays generate new filtered lists, RxJs filters the stream and blocks items from being emitted that is not valid to the filter. — dewwwald
I can reccoment to learn more about rxjs6 in my video course: packtpub.com/web-development/hands-rxjs-web-development-video — Alexander Poshtaruk

Reactgular Reactgular · Accepted Answer · 2019-04-17T15:25:23

Observable<Array<TaskReprintReasonCode>>

Defines a collection of TaskReprintReasonCode objects.

You can use the map() operator to modify the value of an item in a stream. If you want to reduce the array to only those that have a property of "new", then you would use the filter() from the array prototype.

    this.taskService.getTaskReprintReasonCodes().pipe(
        map((arr:TaskReprintReasonCode[]) => {
             return arr.filter(r => r.reasonDescription === 'New');
        )
    )

Array.filter()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Rxjs.map()

https://www.learnrxjs.io/operators/transformation/map.html

Why do the RxJS filter method not work for me

1 Answers