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
}

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?

• javascript
• angular
• typescript
• asynchronous

• 1 I'm slightly confused what you're asking but I think Promise.all is what you're looking for. – 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 Commented Mar 27, 2022 at 19:37

3 Answers 3

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
}

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

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