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. reactivex.io/documentation/operators/concat.html Here's an SO example: stackoverflow.com/questions/30519645/… — Adrian
– Adrian, Commented Nov 14, 2016 at 2: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
– Meir, Commented Nov 14, 2016 at 7:29
this.initializeAlertSeverities(); is called after the first request finishes. — martin
– martin, Commented Nov 14, 2016 at 8:26
See also stackoverflow.com/questions/40295717/… stackoverflow.com/questions/39797698/… stackoverflow.com/questions/39566268/… — martin
– martin, Commented Nov 14, 2016 at 8:26
What is the variable alertServerities$. You never define it nor use it to create a subscription. — paulpdaniels
– paulpdaniels, Commented Nov 14, 2016 at 18:12

naoru · Accepted Answer · 2016-11-16 17:23:46Z

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();
  }

Collectives™ on Stack Overflow

Chaining http calls on angular2 using observables

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related