How to wait for results from multiple async methods wrapped in a for loop?

Question

I'm developing a search algorithm which searches through 3 databases and prints out the results. The general structure of the code looks something like this:

for(type in ["player", "team", "event"]){
   this.searchService.getSearchResult(type).toPromise()
   .then(search_result => {
      if(type == "player"){
        this.player_search_results_full = this.getPlayerSearchResults(search_result, search_string);
      }
      if(type == "team"){
        this.team_search_results_full = this.getTeamSearchResults(search_result, search_string);
      }
      if(type == "event"){
        this.event_search_results_full = this.getEventSearchResults(search_result, search_string);
      }
   })
}
// this.getFinalDisplayResults()

getFinalDisplayResults(){
  // Do some actions on <type>_search_results_full lists
}

Those <type>_search_results_full will be a list that contains the full list of matches for the search_string. I'd like to then wait for all of those lists to be populated, then run them through another method getFinalDisplayResults which chooses a total of X number of results to display from those full lists.

The issue I'm facing is that this.getFinalDisplayResults() executes before those <type>_search_results_full lists are full. I tried putting everything in the for loop in a separate method getFullResults() and then doing something like this:

async getFinalDisplayResults(){
  await getFullResults()
  // Do something
}

But that seems to not work, as adding some logs shows that the for-loop in getFullResults() finishes without the lists being populated.

I don't have a strong understanding of toPromise() and asynchronous methods, so I'm sure I'm just approaching this incorrectly. Can someone help me understand what I should be doing instead?

I'm slightly confused what you're asking but I think Promise.all is what you're looking for. — Tom
– Tom, Commented Mar 26, 2022 at 21:56
@bmorgs note that Promise.allSettled() is sometimes more appropriate than Promise.all(), particularly if there is a chance the async calls might fail, and you wish to take action on a partial success... — Trentium
– Trentium, Commented Mar 27, 2022 at 19:37

ABDULLOKH MUKHAMMADJONOV · Accepted Answer · 2022-03-27 19:35:22Z

4

I think I know what you try to achieve, and the issue you are having, this.getFinalDisplayResults() is executed before you have the results because the logic inside the for loop is asynchronous, so the fix would be.

async function getDataFromBackend () {
    for(let type in ["player", "team", "event"]) {
        const searchResult = await this.searchService.getSearchResult(type).toPromise()
        if(type === "player")
            this.player_search_results_full = this.getPlayerSearchResults(searchResult, search_string);
           
        if(type === "team")
             this.team_search_results_full = this.getTeamSearchResults(searchResult, search_string);
           
        if(type === "event")
             this.event_search_results_full = this.getEventSearchResults(searchResult, search_string);  
     }
}

  

async function getFinalDisplayResults() {
            await getDataFromBackend(); // this will ensure you have the data, before you do the rest of the process
    //rest of the logic here
}

edited Mar 27, 2022 at 19:35

ABDULLOKH MUKHAMMADJONOV

5,3946 gold badges28 silver badges51 bronze badges

answered Mar 26, 2022 at 22:14

Antonio Mora Bautista

826 bronze badges

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

3 Comments

traktor Over a year ago

getDataFromBackend uses its this value. The easiest way to support this may be to call it using await this.getDataFromBackend() with the proviso that getDataFromBackend should be a sibling method of the getFinalDisplayResults method posted.

bmorgs Over a year ago

Beautiful, this is exactly what I was trying to achieve. I'm relatively new to angular and services, so I didn't know I the syntax "const searchResult = await this.searchService.getSearchResult(type).toPromise()" was possible. That really helps, thank you!

Antonio Mora Bautista Over a year ago

Good to know that I was able to help, first time doing it by the way

Dharman · Accepted Answer · 2022-03-26 22:04:23Z

3

I tkink what you are looking for is Promise.all, as it takes an array of Promise and resolves to an array of results.

With your example, it could be something like :

const results = await Promise.all(["player", "team", "event"].map( type => 
   this.searchService.getSearchResult(type).toPromise()
))

edited Mar 26, 2022 at 22:04

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Mar 26, 2022 at 21:58

Misfits09

1961 silver badge9 bronze badges

Comments

danh · Accepted Answer · 2022-03-26 22:09:33Z

1

We can clean it up a little, mainly by iterating the things that vary over the array of types.

const promises = [
  { type: 'player', method: 'getPlayerSearchResults'},
  { type: 'team', method: 'getTeamSearchResults'},
  { type: 'event', method: 'getEventSearchResults'}
].map(obj => {
  return this.searchService.getSearchResult(obj.type).toPromise().then(search_result => {
    return this[obj.method].bind(this)(search_result, search_string);
  })
});
return Promise.all(promises);

edited Mar 26, 2022 at 22:09

answered Mar 26, 2022 at 22:04

danh

62.7k10 gold badges100 silver badges139 bronze badges

Collectives™ on Stack Overflow

How to wait for results from multiple async methods wrapped in a for loop?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related