How to wait till all data is loaded in Angular 2 async dependent http calls?

Question

I'm working on a tool that deals with extracting data from Jira. I can find plenty of examples with chaining multiple http calls to make one after another using data from the previous call. But what I stumble upon is how to wait for all the inner calls to resolve and do stuff with the data and only after that to resolve the outer.

What is happening right here is that the method this.developmentService.getData(this.filter) doesn't wait for the completion of the counting of the stories in each epic in the inner this.developmentService.getStoriesForEpic(epic.key) and this is problematic because after that i need to apply additional filters based on those counts.

updateChart() {
    this.loading = true;
    if (this.dataRequest) { this.dataRequest.unsubscribe(); }

  this.developmentService.getData(this.filter).toPromise().then(initiatives => {
    initiatives.map((initiative) => {
      initiative.devEpics.map((epic) => {
        return this.developmentService.getStoriesForEpic(epic.key).toPromise().then(stories => {
           Promise.all(stories.map((story) => {
            if (story.status == "To Do") {
              epic.storiesToDo++;
            }
            else if (story.status == "In Progress") {
              epic.storiesInProgress++;
            }
            else if (story.status == "Done") {
              epic.storiesDone++;
            }
          }))
        })
      })
  })
  this.data=initiatives;
})

I have tried multiple approaches but can't quite seem to get there. Any help is appreciated! Thanks in advance

Answer 1

Don't convert them into promises, and use RXJS.

forkJoin or combineLatest - depends on your expected behavior.

https://rxjs-dev.firebaseapp.com/api/index/function/combineLatest

https://rxjs-dev.firebaseapp.com/api/index/function/forkJoin

Answer 2

You can try like this

async updateChart() {
    this.loading = true;
    if (this.dataRequest) { this.dataRequest.unsubscribe(); }

  this.developmentService.getData(this.filter).toPromise().then(initiatives => {
    initiatives.map((initiative) => {
      initiative.devEpics.map((epic) => {
       let dataFromGetStoriesForEpic = await getStoriesForEpic(epic);
        })
      })
  })
  this.data=initiatives;
})

here we are creating one function for getStoriesForEpic

getStoriesForEpic(epic) {
return promise = new Promise ((resolve, reject) => {
this.developmentService.getStoriesForEpic(epic.key).toPromise().then(stories => {
           Promise.all(stories.map((story) => {
            if (story.status == "To Do") {
              epic.storiesToDo++;
            }
            else if (story.status == "In Progress") {
              epic.storiesInProgress++;
            }
            else if (story.status == "Done") {
              epic.storiesDone++;
            }
            resolve(epic);
      }))
  })   
}