Chaining http calls on angular2 using observables

Question

I have an angular2 application with a service that makes a HTTP call that has various subscribers (each showing a different piece of info). Once the first call is completed, I need to make a second independent HTTP call, and based on the values retrieved, filter the array obtained from the first call. Its not working, the subscribers of the second HTTP call, doesn't know to wait and i get an empty list since the array of the first call is not yet there

Im attaching the relevant service

constructor(private http: Http) {
    this.initializeAlertService();
    console.log('Started alerts service');
   }

   initializeAlertService() {
        if (!this.allData$) {
          this.allData$ = <BehaviorSubject<Alert[]>> new BehaviorSubject(new Array<Alert>());

          this.http.get(this.url)
            .map((res:Response) => res.json())
            .catch((error:any) => Observable.throw(error || 'Server Error'))
            .subscribe(
              allData => {
                this.allData = allData;
                this.allData$.next(allData);
                this.initializeAlertSeverities(); -- I want this to fire when the 'allData' is ready
              },
              error => console.log("Error subscribing to AlertService: " + error)
            );
        }
  }

subscribeToAlertSeverities(): Observable<AlertSeverity[]>  {

    return this.alertSeverities$.asObservable();
  }

then on my component i subscribe to the alertSeverities, yet i get not data....

You might want to take a look at `concat` operator. http://reactivex.io/documentation/operators/concat.html Here's an SO example: http://stackoverflow.com/questions/30519645/how-can-i-make-one-rxjs-observable-sequence-wait-for-another-to-complete-before — Adrian, Nov 14 '16 at 02:45
Can you please provide the code the consumes the data and explain why you think it triggers before the second call is completed? — Meir, Nov 14 '16 at 07:29
`this.initializeAlertSeverities();` is called after the first request finishes. — martin, Nov 14 '16 at 08:26
See also http://stackoverflow.com/questions/40295717/angular-2-rxjs-need-some-help-batching-requests/40312328#40312328 http://stackoverflow.com/questions/39797698/observable-continue-calling-api-and-changing-parameters-based-on-condition/39816349#39816349 http://stackoverflow.com/questions/39566268/angular-2-rxjs-how-return-stream-of-objects-fetched-with-several-subsequent/39578646#39578646 — martin, Nov 14 '16 at 08:26
What is the variable `alertServerities$`. You never define it nor use it to create a subscription. — paulpdaniels, Nov 14 '16 at 18:12
@martin I tried the concatMap but in the subscribe part i need to do different operation (after first url call do A and for second url call do B) — naoru, Nov 16 '16 at 16:30

score 0 · Accepted Answer · answered Nov 16 '16 at 17:23

I was able to solve this issue by passing the result of the http call to a function in the subscribe part of the code

constructor(private http: Http) {
    this.initializeAlertService();
    console.log('Started alerts service');
  }

  initializeAlertService() {
    if (!this.alerts$) {
      this.alerts$ = <BehaviorSubject<Alert[]>> new BehaviorSubject(new Array<Alert>());
      this.alertSeverities$ = <BehaviorSubject<AlertSeverity[]>> new BehaviorSubject(new Array<AlertSeverity>());

      this.http.get('first url')
      .map((res:Response) => res.json())
      .subscribe(alerts => {
        this.alerts$.next(alerts);
        this.initializeAlertSeverities(alerts);
      })
    }
  }

  initializeAlertSeverities(alerts){
    this.http.get('second url')
    .map((res:Response) => res.json())
    .catch((error:any) => Observable.throw(error || 'Server Error'))
    .subscribe(
      severities => {
        severities.map((severity) => {
          var severityCounter = alerts.filter(alert => alert['severity'] == severity.severityValue).length;
          severity.severityCount = severityCounter;
        });

        this.alertSeverities$.next(severities);
      },
      error => console.log("Error subscribing to Alert Severities: " + error)
    );
  }

  subscribeToAlertSeverities(): Observable<AlertSeverity[]>  {
    //actual subscriber that components subscribe to
    return this.alertSeverities$.asObservable();
  }


  subscribeToAlertService(): Observable<Alert[]> {
    return this.alerts$.asObservable();
  }

Chaining http calls on angular2 using observables

1 Answers1