Rxjs6 - filter array of objects

Question

I would filter array of objects using RXJS operator filter

I've array of objects like this single one:

    {
      id: string,
      count: number
    }

I would get objects which count > 20

I tried:

  getVotes2(): Observable<Vote> {
    return this._http.get<Vote>(url)
     .pipe(
       map( results => results ),
       filter( result => result.count>20 )
     );
  }

next, without map and I always get all records.

Any ideas?

---------CORRECT CODE------------

getVotes2(): Observable<Vote[]> {
 return this._http.get<Vote[]>(url)
  .pipe(
    map( results => results.filter( r => r.count < 20) )
  )
}

Did you wanted to use switchMap instead of map here ?

Darko
– Darko

2018-08-17 15:14:23 +00:00
Commented Aug 17, 2018 at 15:14 — Darko
– Darko, Commented Aug 17, 2018 at 15:14
I don't know how it exactly works. I need to filter array.

3D_fun
– 3D_fun

2018-08-17 15:18:10 +00:00
Commented Aug 17, 2018 at 15:18 — 3D_fun
– 3D_fun, Commented Aug 17, 2018 at 15:18

bryan60 · Accepted Answer · 2021-12-14 15:15:02Z

50

You're confused on the use of the rx filter operator.

The filter rx operator is NOT the same as the array filter operator. The rx filter operates on a stream and excludes things from THE STREAM that meet a condition, the array filter operator operates on an array and removes items from an array based on a condition.

What you're currently doing is filtering the stream on some undefined "count" property of the array itself, so you're saying "if undefined > 20, then don't let the item through the stream", and one of the quirks of javascript, undefined is not greater than 20 despite being an invalid comparison.

What you need to do is this:

getVotes2(): Observable<Vote[]> {
 return this._http.get<Vote[]>(url)
  .pipe(
    map( results => results.filter(r => r.count > 20) )
  );
}

This way, you use rx Map to perform an operation on the item IN the stream and use the array filter on the item to filter the array.

Edit: as pointed out, the typing also needs to be correct to let typescript know that you're expecting an array of vote objects rather than a single vote object.

edited Dec 14, 2021 at 15:15

answered Aug 17, 2018 at 15:45

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

3 Comments

3D_fun Over a year ago

I add type of array <Vote[]> and it's good result. Thanks for explanation!

bryan60 Over a year ago

ah yea, good point, the typing needs to be correct, will update my answer

Francesco Over a year ago

Just a small add-on (for future readers): both undefined > 20 AND undefined < 20 are always false

Darko · Accepted Answer · 2018-08-17 15:36:10Z

0

If http response you are getting is something like

{ 
  data: {
    results: [ {id: 'dd5144s', count: 14}, {id: 'dd51s4s', count: 22}, {id: 'dd5sa44s', count: 8}  ]
  }
}

Then try this:

 return this._http.get<Vote>(url)
   .pipe(
     switchMap( results => results ),
     filter( result => result.count>20 )
   );

Hope this helps.

edited Aug 17, 2018 at 15:36

answered Aug 17, 2018 at 15:26

Darko

5351 gold badge4 silver badges14 bronze badges

2 Comments

3D_fun Over a year ago

Http return me an array of objects which I would filter.

3D_fun Over a year ago

Editor show me an error: 'Type Observable<{}> is not assignable to type Observable<Vote>. Type '{}' is not assignable to type 'Vote'. Property 'count' is missing in type '{}''

Collectives™ on Stack Overflow

Rxjs6 - filter array of objects

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related