如何使用来自 rxjs 的过滤器

Question

I am filtering an array of JSON objects, I want to return the found object based on the passed in id argument.

 getClient(id) {
   return this.http.get<any>(' http://localhost:3000/clients')
    .pipe(
      filter(client => client.idNumber === id)
    );
 }

The observer to the above is not triggered and does not receive any data.

  getClient(id)
  .subscribe(
   (data) => {
     // nothing here
   }
  )

The below implementation of getClient achieves what I want.

 getClient(id) {
   return this.http.get<any>(' http://localhost:3000/clients')
    .pipe(
      map(clients => clients.find(client => client.idNumber === id))
    );
 }

I would like to understand, am I using the filter operator the wrong way? And how is my usage different from the one here

Answer 1

Correct, you are using the rxjs filter operator the wrong way.

Per the docs :

Filter items emitted by the source Observable by only emitting those that satisfy a specified predicate.

In your example, the client value that is getting sent to filter is the array of clients that your http request returned. Then, you are saying "don't emit anything unless client (which is actually an array and has no "idNumber" property is equal to id , which will always be false because unefined !== number

If you want to modify the, you need to use the map operator. The map operator takes what the observable emits, lets you do something (like filter or find in the array), and then return that modified data to subscribers.

Also, if you type your responses property, TypeScript will warn you about this. Instead of this.http.get<any> use this.http.get<Client[]> or some more appropriate type. You would be able to see at compile time that Client[] has no property idNumber .