Angular 2, using an observable with a pipe and returning results

Question

I'm passing in an id to a pipe that makes an api call and returns an observable. I need to return the data filtered as requested by the pipe:

...
  transform(value: string, userProp?: any): any {
    let userData;
    this.userService.getUser(value).subscribe(res => {
      userData = res;
      if (!userProp) {
        return userData;
      } else {
        const prop = userProp === 'displayName' ? `${userData.firstName} ${userData.lastName}` : oneProjectUser(value)[userProp];
        return prop;
      }
    });
  }
...

I'm aware the above is incorrect, however this is what I have currently.

Don't `subscribe()` inside that function. Instead use RxJS `map()` with `pipe()` (pipeable operators). Also add a `return` at the outer level, returning from within `subscribe()` doesn't actually return anything. — Alexander Staroselsky, Apr 18 '19 at 16:37

Francisco Santorelli · Answer 1 · 2019-04-18T16:48:00.740

are you trying to return an observable from it?

if you are, there's the error, because when you return userData you are not returning the observable, but the value. If you wish to return the observable, don't subscribe to it, and instead use .pipe(map( your res => transform logic...)), this way, you are transforming the observable result and returning the mapped result inside the observable. When you subscribe, you consume the observable, hence the mistake.

eg:

...
  transform(value: string, userProp?: any): any {
    return this.userService.getUser(value).pipe(map(res => { // changed the subscribe
      let userData; // scoping it inside the return
      userData = res;
      if (!userProp) {
        return userData;
      } else {
        const prop = userProp === 'displayName' ? `${userData.firstName} ${userData.lastName}` : oneProjectUser(value)[userProp];
        return prop;
      }
    }));
  }
...

I think this is right, but have not tested it. Do tell me if it works

edit for clarificaiton

if you do: return this.service.get() and it returns an observable, you get an Observable<T>;

return this.service.get().subscribe() you are returning a Subscription interface, which is not what you want (it has the unsubscribe methods and so on, but it's not the Observable).

this.service.get(res => { return res }), you are returning the value of res, which is a value (object, text, whatever). Problem is, due to it being async, teh method actually returns undefined with sync calls, so you have to be aware of that.

pipes allow you to manipulate results inside Observables so you get from the call exactly what you intend to get. Do read about them, the most common are map, tap, filter and some more I can't remember, they are in the docs of Angular though (the most commonly used).

Angular 2, using an observable with a pipe and returning results

1 Answers1