What is the best way to implement an asynchronous function using a for loop and APIs in Typescript?

Question

What is the best way to implement an asynchronous function using a for loop and APIs in Typescript?

Struggling with ensuring my function returns data only after completing all API calls and the for loop.

getListingsImages(sessionID, mlsSearchCriteria){

      this.http.get(this.laconiaBaseURL + "mls/search/" + sessionID + "?" +queryString).subscribe((data)=>{

        listings = data['data'];

         for (let listing of listings) {

          postData.listingImageURL = imageBaseURL + listing.firstImage;
          postData.listingPrice = this.formatter.format(listing.ListPrice).toString();
          postData.listingMLSID = listing.listingKey;
          postData.listingAddress = listing.FullAddress;

          this.http.post(this.imageParserBaseURL, postData, {responseType: 'text'}).subscribe((data)=>{

            this.slides.push({
              data: data,
              type: "image",
              slideHeader: null,
              duration: 10
            });

          });
        }
      });
  }

Noticing two http calls, I need to ensure both listings are retrieved before progressing through the for loop. this.slides currently a global variable.

Attempted callbacks but struggling to apply them effectively in my case. How can I make sure my code waits for completion of both API calls and the For loop?

angular typescript asynchronous

Answer 1

Answer №1

To convert observables into promises and implement an async/await pattern, follow this example:

async getListingsImages(sessionID, mlsSearchCriteria) {
  const data = await lastValueFrom(this.http.get(this.laconiaBaseURL + "mls/search/" + sessionID + "?" +queryString));
  listings = data['data'];
  let postDatas = listings.map(listing => Object.assign({}, postData, {
      listingImageURL: imageBaseURL + listing.firstImage,
      listingPrice: this.formatter.format(listing.ListPrice).toString(),
      listingMLSID: listing.listingKey,
      listingAddress: listing.FullAddress
    });
  let posts = postDatas
    .map(postData => this.http.post(this.imageParserBaseURL, postData, {responseType: 'text'}))
    .map(obs => lastValueFrom(obs));
  const results = await Promise.all(posts);
  const newSlides = results.map(data =>{
          data: data,
          type: "image",
          slideHeader: null,
          duration: 10
        });
  this.slides.push(... newSlides);
}

This code assumes certain behaviors such as:

The values added to this.slides will maintain the same order as returned in the initial request's data
Waiting for all results to be retrieved before updating this.slides
No cancellation of requests is needed
No restriction on concurrent requests made to imageParserBaseURL

If more advanced behavior is required, adjustments may be necessary, possibly returning an Observable instead of a Promise.

Answer 2

To convert observables into promises and implement an async/await pattern, follow this example:

async getListingsImages(sessionID, mlsSearchCriteria) {
  const data = await lastValueFrom(this.http.get(this.laconiaBaseURL + "mls/search/" + sessionID + "?" +queryString));
  listings = data['data'];
  let postDatas = listings.map(listing => Object.assign({}, postData, {
      listingImageURL: imageBaseURL + listing.firstImage,
      listingPrice: this.formatter.format(listing.ListPrice).toString(),
      listingMLSID: listing.listingKey,
      listingAddress: listing.FullAddress
    });
  let posts = postDatas
    .map(postData => this.http.post(this.imageParserBaseURL, postData, {responseType: 'text'}))
    .map(obs => lastValueFrom(obs));
  const results = await Promise.all(posts);
  const newSlides = results.map(data =>{
          data: data,
          type: "image",
          slideHeader: null,
          duration: 10
        });
  this.slides.push(... newSlides);
}

This code assumes certain behaviors such as:

The values added to this.slides will maintain the same order as returned in the initial request's data
Waiting for all results to be retrieved before updating this.slides
No cancellation of requests is needed
No restriction on concurrent requests made to imageParserBaseURL

If more advanced behavior is required, adjustments may be necessary, possibly returning an Observable instead of a Promise.

What is the best way to implement an asynchronous function using a for loop and APIs in Typescript?

Answer №1

Similar questions

Primeng - Displaying names in editable datatable with multiSelect feature

The switch statement and corresponding if-else loop consistently produce incorrect results

When assigning JSON to a class object, the local functions within the class became damaged

Error message on Cypress with TypeScript: No test specification files detected

Ensuring that environment variables are properly set is essential for effective error handling

Trigger a (click) event on the MatTab in Material design

encountering an issue during the installation of a node package

Navigating the maze of Material UI in React with TypeScript

Challenges Encountered when Making Multiple API Requests

The error message "The type 'MouseEvent' is non-generic in TypeScript" popped up on the screen

`The Art of Curved Arrows in sigjma.js, typescript, and npm`

Proper method for typing the generics of DatePickerProps belonging to the DatePicker component in mui-x library

Angular Error: The first argument has a property that contains NaN

Exploring Angular's nested Routing within dynamically loading Modules using a specific router-outlet reference

return to the original secured page based on the most recent language preference

Value attribute property binding

The requested property map cannot be found within the Array

Is it feasible to select which modules to be loaded into the application?

Obtaining the TemplateRef from any HTML Element in Angular 2

Deploying an Angular application on Firebase is a great way to