Calling nested subscribe sequentially

Question

calling one subscribe which is depending one another subscribe method

structure:

    this.example1().subscribe(res => {
      this.response = res;
    })


  example1(): Observable<any> | any {
    this.example2().pipe(
      catchError(err => {
        return throwError(err);
      })
    ).subscribe(res => {
       return of(res);
    });
  }

  example2(): Observable<any> | any {
     this.example3().pipe(
      catchError(err => {
        return throwError(err);
      })
    ).subscribe(res => {
      return of(res);
    });

  }

  example3() {
    return of('return from example 3');
  }

now getting error "Cannot read property 'pipe' of undefined"

example3() returns value correctly but from example2 value does not get return to example 1

link: stackblitz demo

@denajan, when an observable depends anothe one, you must use switchMap — Eliseo, Mar 14 '19 at 17:06
hi i returned value from example1() and example2().But still no luck — debanjan mal, Mar 15 '19 at 06:37

score 0 · Answer 1 · answered Mar 14 '19 at 19:41

0

example1() and example2() functions do not return anything. Just add the return keyword to return your Observables.

answered Mar 14 '19 at 19:41

Brice Argenson

802
2
8
13

Ivanes · Answer 2 · 2022-08-10T16:37:22.507

0

You don't need to subscribe in example1(), example2(), example3().
Return in async callback method subscribe is not return of function.

  example1(): Observable<any> | any {
    console.log('1');
    return this.example2().pipe(
      catchError(err => {
        return throwError(err);
      })
    );
  }

  example2(): Observable<any> | any {
    console.log('2');
    return this.example3().pipe(
      catchError(err => {
        return throwError(err);
      })
    );
  }

  example3() {
    console.log('3');
    return of('return from example 3');
  }

StackBlitz

UPDATE (15.03.2019) With your comment, the code should be:

export class AppComponent {
  response;
  private init$: Observable<any>;

  public ngOnInit() {
    //get Data from remote
    this.example3().subscribe(value => {
      //Do primary somethimg with result
      let calcVal = value *2;
      // Do remote something with data
      this.example2(calcVal).subscribe(newValue => {
        // Result with updated data
        console.log(newValue);
        this.response = newValue;
      });
    });
  }

  // Async do something with data
  example2(value: number): Observable<string>{
    return of('Value is: ' + value);
  }

  // Async get data
  example3(): Observable<number> {
    console.log('3');
    return of(3);
  }

}

StackBlitz

Or with switchMap:

export class AppComponent {
  response;
  private init$: Observable<any>;

  public ngOnInit() {
    let obs = this.example3().pipe(switchMap(val => this.example2(val)));
    obs.subscribe(result => this.response = result);
  }

  // Async do something with data
  example2(value: number): Observable<string>{
    return of('Value is: ' + value);
  }

  // Async get data
  example3(): Observable<number> {
    console.log('3');
    return of(3);
 
}

StackBlitz

edited Aug 10 '22 at 16:37

answered Mar 15 '19 at 07:09

Ivanes

515
2
14

thanks @lvanes for your valuable reply.It is working fine but my scenario is little bit different.I am calculating something in sample2 function where incoming value is coming from sample3() and final value will go to sample1() function.Please look at stackblitz https://stackblitz.com/edit/angular-eyz2j7 – debanjan mal Mar 15 '19 at 10:32
@debanjanMal Should your **example2** calculating been async? [Updated example](https://stackblitz.com/edit/angular-bczq5z?file=src/app/app.component.ts) – Ivanes Mar 15 '19 at 10:57
@lvanes yes it is async data but calculation part should be happen in example2() because this is common for all.I think i can use switchMap – debanjan mal Mar 15 '19 at 14:27
switchMap may help you. But do you need it? It is using for combine two Observables and auto-unsubscribe if first **Observable** stream is call **next()** more than one time. Is the answer (after update) not suitable for you? ([About switchMap](https://www.learnrxjs.io/operators/transformation/switchmap.html)) – Ivanes Mar 15 '19 at 16:55
@lvanes any suggestion .This is mandatory , all the calculation part will happen in example2() – debanjan mal Mar 18 '19 at 08:34
If switchMap is suitable in unsubcribe (the second **next()** result of subscription **example3** restart calculation **example2**, and don't callback the first result) you may use it. If this is not your case, and you need every result of calculation use mergeMap. – Ivanes Mar 18 '19 at 09:19
Thank you so much @lvanes. I really appreciate your valuable response.I solve this problem by using swichMap.I don't know what is wrong in this question why someone dislike this question i don't know. – debanjan mal Mar 19 '19 at 12:57
Not at all. You may vote on it or accept it. *Please do not add a comment on your question or on an answer to say "Thank you"*. [StackOverflow Rules](https://stackoverflow.com/help/someone-answers) – Ivanes Mar 19 '19 at 13:02

Calling nested subscribe sequentially

2 Answers2