Angular: How do I Rxjs filter by property through an array of objects?

Question

What is the correct way to apply an RXJS v5.5 filter to an array of objects?

I am getting back a json array that looks like this:

[
    0: {CompanyName: "Facebook Inc-A", Symbol: "FB", is_etf: false},
    1: {CompanyName: "Flagstar Bancp", Symbol: "FBC", is_etf: false},
    2: {CompanyName: "UBS AG FI Enhanced Large Cap Growth ETN", etf_data: {…}, Symbol: "FBGX", is_etf: true},
    3: {CompanyName: "Fortune Brd H&S", Symbol: "FBHS", is_etf: false},
    4: {CompanyName: "Fortress Biotec", Symbol: "FBIO", is_etf: false},
    5: {CompanyName: "First Bus Finl", Symbol: "FBIZ", is_etf: false},
...]

I need to keep values with is_etf === false

I currently have:

...

.switchMap(val => this.symbolSearchService.symbolLookup(val))
      .takeUntil(this.ngUnsubscribe)
      .filter((value) => {
        console.log(value)
        return true
      })
      .subscribe(val => {
        console.log('val', val)
        this.searchResults = val;
      });

symbolLookup returns the array referenced above. inside the filter I've tried:

value => !value.is_etf

value => return value.is_etf === false

value => value['is_etf'] === false

but none of these work, as the is_etf property is on each object, not on the value response. Before RXJS I would've just done a for loop and then just go with value[i]['is_etf'] etc but no luck here. All the reading materials I've encountered are doing simple filters like value => value > 2 ... any advice?

Thanks!!

ggradnig · Accepted Answer · 2018-08-09 19:17:18Z

2

The filter operator in RxJS does not behave like the Array.filter function used for filtering out items from a list.

What you are actually getting from this.symbolSearchService.symbolLookup(val) seems to be an array, so the type of the emmission in filter will also be an array. So, what you might be looking for is a map operator that forwards the filtered list, like that:

.switchMap(val => this.symbolSearchService.symbolLookup(val))
      .takeUntil(this.ngUnsubscribe)
      .map((values) => {
        return values.filter(v => !v.is_etf);
      })
      .subscribe(val => {
        console.log('val', val)
        this.searchResults = val;
      });

answered Aug 9, 2018 at 19:17

ggradnig

14.3k4 gold badges43 silver badges66 bronze badges

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

2 Comments

dhoffens Over a year ago

Will look into map, thanks @ggradnig. Oh yes this worked!! Thanks again!

ggradnig Over a year ago

this looks like a typing problem.. you need to declare an interface for the data type you are receiving and returing it at this.symbolSearchService.symbolLookup(val)

Collectives™ on Stack Overflow

Angular: How do I Rxjs filter by property through an array of objects?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related