Rxjs return an Observable from inner observable

Question

I have an outer observable that i use with its result in the inner observable and that I need to return the result from the inner observable

In the following example, I need to return the result allPersons from the second observable

the result from that function is Observable I want the it will return Observable

 getAllPerson(): Observable<Data1[]> {
    return this.dataService.getIds().subscribe(
    (ids) => {
       return this.dataService.getPersons().pipe(
         map((allPersons) => {
           console.log(ids);
         //filter persons according to ids
           return allPersons;
         })
     
     })
   );
 }

Also tried: and get Argument of type 'Observable' is not assignable to parameter of type 'OperatorFunction<any, any>'.

getAllPerson(): Observable<any> {
   return this. dataService.getIds().pipe(
     switchMap((data) => {
       this.dataService.getPersons().subscribe(
         (allPersons) => {
            console.log(ids);
        //filter persons according to ids
          return allPersons;
         })
     })
   );
 }

https://stackoverflow.com/questions/52774281/how-to-properly-chain-rxjs-6-observables — martin, Aug 09 '22 at 09:44

score 1 · Answer 1 · answered Aug 09 '22 at 10:50

It's going to be somthing like that :

function getAllPerson(): Observable<Data1[]> {
  return this.dataService.getIds().pipe(
    switchMap((ids) => {
      return this.dataService.getPersons().pipe(
        map((allPersons) => {
          return allPersons.filter(...);          //filter persons according to ids
        })
      );
    })
  );
}

And subscribe the whole thing.

score 0 · Answer 2 · answered Aug 09 '22 at 18:31

Okay, I see you're using TypeScript (nice), but there's a type error in the first two lines of your code.

getAllPerson(): Observable<Data1[]> {
    return this.dataService.getIds().subscribe( /*more code here */ );

The type check is going to look at this is complain. It will say something like, "Denotationally, you've declared that this function returns an Observable object. By inference, I can see you're returning a Subscription object. As far as I can tell, Observable objects and subscription objects cannot be unified. This is a type error.

It's right.

The issue is that once you subscribe to an observable, you're no longer in RxJS land. You're left with an imperative way to end an observable, but you're done dealing with observable.

Think about subscribing as your way to exist the RxJS library. So if operators like of, from, fromEvent, new Subject, new BehaviorSubject, ect are ways to enter the RxJS library, then subscribe, lastValueFrom, firstValueFrom, behaviorSub.value, etc are ways to exit the RxJS library.

So how to avoid that dreaded subscribe. This is where RxJS hiher order operators come in. They let you chain, combine, merge, etc streams

for Example:

function getAllPerson(): Observable<Data1[]> {
  return this.dataService.getIds().pipe(
    switchMap(ids => this.dataService.getPersons().pipe(
        map(allPersons => allPersons.filter(/* filter code ...*/))
    ))
  );
}

Rxjs return an Observable from inner observable

2 Answers2