Angular 2: Use results of one http call to do another

Question

I want to find work items for a given team. This needs to happen in two steps:

Retrieve the worklist that was generated for that team
Retrieve the work items that are attached to that worklist

This is how I get the worklist:

WorklistService.ts

public getByTeamId(teamId): Observable<Worklist> {
    return this._http
        .get(url + "/" + teamId)
        .map(res => res.json().data as Worklist)
        .catch(this.handleError);
}

And here's how I get work items that are attached to that list:

WorkItemService.ts

public getByWorklistId(worklistId): Observable<WorkItem[]> {
    return this._http
        .get(url + "/" + worklistId)
        .map(res => res.json().data as WorkItem[])
        .catch(this.handleError);
}

Then in my Component I'd need to somehow chain these calls. Here's what I have so far:

this._worklistService
    .getByTeamId(teamId)
    .subscribe(
        worklist => {
            if (worklist) {
                this._workItemService
                    .getByWorklistId(worklist._id)                    
                    .subscribe(
                        workItems => this.workItems = workItems,
                        error => console.log("Could not retrieve work items"));
            }
        },
        error => console.log("Could not retrieve worklist"));

Is this really the best way to chain these calls or is there a more elegant way?

Thierry Templier · Accepted Answer · 2016-04-26 16:21:08Z

1

You could leverage the flatMap operator to do that:

this._worklistService
    .getByTeamId(teamId)
    .flatMap(
      worklist => {
        if (worklist) {
          return this._workItemService
                 .getByWorklistId(worklist._id);
        } else {
          return Observable.throw('worklist is undefined');
        }
      })
    .subscribe(
       workItems => this.workItems = workItems,
       error => console.log("Could not retrieve work items"));

This operator allows to plug another request when the first one completes into the asynchronous data flow.

answered Apr 26, 2016 at 16:21

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

Collectives™ on Stack Overflow

Angular 2: Use results of one http call to do another

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related