Angular 2 rxjs nested Observables

Question

I wish to create a function that returns an Observable<any> but before returning another asyncronous task must complete (an Observable<string>), in order for a value to be passed to the returned Observable.

 @Injectable()
 export class MyComponent
 {

      GetAuthToken = function() : Observable<string>
      {
           return this._storageService.GetAsString('authToken');
      }

      GetData = function(authToken) : Observable<any>
      {

           let headers = new Headers();
           headers.append('authToken', authToken);
           var getUsers = this._http.get('/api/endpoint', { headers: headers })
                 .map((resonse: Response) => resonse.json()));

           return getUsers;        
      }


      DoIt = function() : Observable<any>
      {
          this.GetAuthToken ().Subsribe(t=> {
              return GetData(t); 
          })
      }          


 }

So instead of passing the authToken parameter into the GetData function, I wish to execute the GetAuthToken function within the GetData function, wait for its completion, and then still return the http observable.

Executing the DoIt function would return the subscriber, not the GetData Observable

Completely unrelated question: Why are you using syntax: GetAuthToken = function() {...} and not GetAuthToken() {...} like everyone else (I know these two method definitions aren't the same though)? — martin
– martin, Commented Nov 7, 2016 at 15:06
Use Observable.forkJoin, check this: github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/… — dlcardozo
– dlcardozo, Commented Nov 7, 2016 at 15:06
@camaron the first observable needs to finish executing before the second begins. And I need to return the Observable<Response> from the Http service, not an amalgamation — gunwin
– gunwin, Commented Nov 7, 2016 at 15:09
@gunwin I understand the difference but I really doubt you need to use it. This btw makes extending your class very complicated. It's basically the same problem as described here stackoverflow.com/questions/40398381/… — martin
– martin, Commented Nov 7, 2016 at 15:12

gunwin · Accepted Answer · 2016-11-07 15:13:21Z

10

Try using concatMap():

DoIt() : Observable<any>
{
    return this.GetAuthToken()
        .concatMap(token => this.GetData(token)); 
}

edited Nov 7, 2016 at 15:13

gunwin

4,8525 gold badges39 silver badges59 bronze badges

answered Nov 7, 2016 at 15:10

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

2 Comments

gunwin Over a year ago

Perfect. This works. My WebAPI service wasn't running, which caused my null problem. Thank you!

Reinhard Over a year ago

similar problem - concatMap() works perfect ! Thank you.

gunwin · Accepted Answer · 2017-10-11 15:05:21Z

0

This is also possible using flatMap

DoIt() : Observable<any>
{
    return this.GetAuthToken()
        .flatMap(token => this.GetData(token)); 
}

answered Oct 11, 2017 at 15:05

gunwin

4,8525 gold badges39 silver badges59 bronze badges

Collectives™ on Stack Overflow

Angular 2 rxjs nested Observables

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related