Tips for efficiently awaiting outcomes from numerous asynchronous procedures enclosed within a for loop?

Question

Tips for efficiently awaiting outcomes from numerous asynchronous procedures enclosed within a for loop?

I am currently working on a search algorithm that goes through 3 different databases and displays the results. The basic structure of the code is as follows:

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(){
  // Perform actions on <type>_search_results_full lists
}

The <type>_search_results_full list will have all matching results for the search_string. I want to wait until all these lists are populated before running them through another method getFinalDisplayResults, which selects X number of results to display from those complete lists.

The problem I'm encountering is that this.getFinalDisplayResults() runs before the completion of <type>_search_results_full lists. I attempted putting everything inside the for loop into a separate method getFullResults() and then using something like this:

async getFinalDisplayResults(){
  await getFullResults()
  // Perform the required action
}

However, it appears not to be functioning correctly, as some logs indicate that the for-loop in getFullResults() finishes without fully populating the lists.

My knowledge of toPromise() and asynchronous methods is limited, so I believe my approach may be incorrect. Can someone provide guidance on what I should do differently?

javascript angular typescript asynchronous

Answer 1

Answer №1

It seems like I understand the goal you are trying to achieve and the problem you're facing. The function this.getFinalDisplayResults() is being executed before the results are available because the logic inside the for loop is asynchronous. To resolve this issue, you can make the following adjustment:

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(); // By doing this, you ensure that data is available before proceeding with the remaining process
    //Add the rest of the logic here
}

Answer 2

It seems like I understand the goal you are trying to achieve and the problem you're facing. The function this.getFinalDisplayResults() is being executed before the results are available because the logic inside the for loop is asynchronous. To resolve this issue, you can make the following adjustment:

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(); // By doing this, you ensure that data is available before proceeding with the remaining process
    //Add the rest of the logic here
}

Answer 3

Answer №2

It appears that you may be searching for Promise.all, which will accept an array of Promises and return an array of results upon resolution.

For your specific scenario, a potential implementation could look like this:

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

Answer 4

It appears that you may be searching for Promise.all, which will accept an array of Promises and return an array of results upon resolution.

For your specific scenario, a potential implementation could look like this:

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

Answer 5

Answer №3

One way to improve the code is by iterating through an array of different types and their corresponding methods.

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

Answer 6

One way to improve the code is by iterating through an array of different types and their corresponding methods.

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

Tips for efficiently awaiting outcomes from numerous asynchronous procedures enclosed within a for loop?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to transfer HTML code from a textarea to CKEDITOR for setData?

Duplicate a Google Sheet and save it to a specific folder in Google Drive

Node.JS executes Sandbox within a RESTful service environment

What could be causing this highchart plot to fail to display in both IE and Chrome?

What could be causing the div to be wider than the content inside of it?

How can I determine if a user has reached the end of a non-scrollable div by utilizing HostListener and directives within Angular?

What could be causing my second ajax call to render the page unresponsive?

NPM Messer - the innovative chat tool for Facebook Messenger. Ready to see it in action?

Preventing the use of the <select> tag in JavaScript

A guide on implementing listings in React Native through the use of loops

Enhance the functionality of Woocommerce email notifications by incorporating a customized VAT field

What is the best method to display an asterisk (*) in red while using React and Material UI

Should URL parameters be avoided as a method for retrieving data with React Router in a React application?

experiencing difficulty in transmitting HTML content through nodemailer

Using `publishReplay()` and `refCount()` in Angular does not behave as anticipated when dealing with subscriptions across multiple components

"An error in the signature index results in the failure of the

Guide to aligning the orientation of an object with a given normal vector using three.js

Implement a unique feature for specific days using jQuery UI Datepicker with a customized class

Organize information within a single column of a table according to the heading using Angular

What is the best way to access a JSON Array in php without using any specified keys?