How to return observable in observable map in Angular

Question

I can really find no words for what I want to do. So I just show my attempt..This is what I tried:

register(): Observable<boolean> {

   return this.registerNew().pipe(
     map(userData => {
       return this.updateProfile().pipe(                   (*1)
         map(profileData => {
           return profileData ? true : false;
         }))
     }))
}

But of course I get the following error message:

Type 'Observable<false | Observable<boolean>>' is not assignable to type 'Observable<boolean>'.

I am also thinking about using await instead of return in the line which I marked with (*1).

But still I can't get it to work in a nice way.

.flatMap?

jonrsharpe
– jonrsharpe

2019-06-11 15:51:03 +00:00
Commented Jun 11, 2019 at 15:51 — jonrsharpe
– jonrsharpe, Commented Jun 11, 2019 at 15:51

blacktide · Accepted Answer · 2022-01-25 06:07:27Z

12

If you want to switch from one observable to another and use the value from the previous there is a switchMap operator which can be used like that

register(): Observable<boolean> {
  return this.registerNew().pipe(
    switchMap(userData => {
      return this.updateProfile().pipe(
        map(profileData => {
          return profileData ? true : false;
        }))
     }));
}

What causes to happen registerNew, then it passes resulting value to the switchMap returning observable (switchMap has to return an observable to work) and then the result of the inner observable (updateProfile) comes to subscriber.

edited Jan 25, 2022 at 6:07

blacktide

12.4k8 gold badges42 silver badges59 bronze badges

answered Jun 11, 2019 at 15:59

Sergey

7,69214 gold badges49 silver badges97 bronze badges

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

2 Comments

khizerrehandev Over a year ago

should not true of false be wrapped like of(true) || of(false)?

Sergey Over a year ago

It's map not switchMap

Sebdej · Accepted Answer · 2019-06-11 16:01:11Z

1

If you want to map values of your observable to another observable, you want to use mergeMap, switchMap, or concatMap (depending on how you want the values of the newly created observable to be emitted).

await is not for Observables, only Promises.

answered Jun 11, 2019 at 16:01

Sebdej

3282 silver badges8 bronze badges

Comments

Reactgular · Accepted Answer · 2019-06-11 17:10:02Z

1

You use the switchMapTo() operator when you don't need the emitted value, and just want to switch to another observable.

register(): Observable<boolean> {
   return this.registerNew().pipe(
     switchMapTo(this.updateProfile()),
     map(Boolean)
   );
}

answered Jun 11, 2019 at 17:10

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

Comments

Ben Racicot · Accepted Answer · 2019-06-11 17:13:16Z

0

You need concatMap.

this example calls for the user id first, only when it has returned
the second "observable" uses the returned value from the first to make the user query

this.authenticationService.currentUser.pipe(
    concatMap((principal: Principal) => this.getUser(principal.id))
).subscribe((user: User) => {
    console.log(user); // the user
});

answered Jun 11, 2019 at 17:13

Ben Racicot

6,04816 gold badges82 silver badges140 bronze badges

Collectives™ on Stack Overflow

How to return observable in observable map in Angular

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related