Wait for each observable subscription to complete

Question

Wait for each observable subscription to complete

In my scenario, I have an array called orderCodes, which stores specific order codes. With each code, I can retrieve the corresponding order details, where each order contains multiple products. My goal is to extract the code of each product from the order details.

The function getOrderDetails() returns an Observable containing the results (an array of products). Each individual result has a code property that holds the necessary information.

this.orderCodes.forEach((orderCode) => {

  loadOrderDetails(orderCode);

  getOrderDetails().subscribe((order: any) => {
    if (order.results) {
      order.results.map((result) => {
        console.log(result.code);
      });
    }
  });

});

I attempted using this forEach loop, but due to subscribing to an Observable, the loop moves on to the next iteration before waiting for the previous one to complete. As a result, the desired output is not achieved.

Do you have any suggestions or solutions?

javascript angular typescript foreach observable

Answer 1

Answer №1

One way to approach this with RxJS is:

from(this.orderCodes).pipe(
  concatMap((orderCode) =>  // Using concatMap to maintain order of items
    defer(() => {
      loadOrderDetails(orderCode);

      return getOrderDetails();

    }))
).subscribe((order: any) => {
  if (order.results) {
    order.results.map((result) => {
      console.log(result.code);
    });
  }
});

Alternatively, you could handle it using promises and async/await:

async myFunctionThatDoesAllThis(...) {
....
for(let orderCode of this.orderCodes) {
  loadOrderDetails();
  const order = await getOrderDetails().pipe(take(1)).toPromise(); // Skip pipe(take(1)) if getOrderDetails is just an http request.
  if(order.results) {
     order.results.forEach((result) => {
        console.log(result.code);
     });
  }
}

Answer 2

One way to approach this with RxJS is:

from(this.orderCodes).pipe(
  concatMap((orderCode) =>  // Using concatMap to maintain order of items
    defer(() => {
      loadOrderDetails(orderCode);

      return getOrderDetails();

    }))
).subscribe((order: any) => {
  if (order.results) {
    order.results.map((result) => {
      console.log(result.code);
    });
  }
});

Alternatively, you could handle it using promises and async/await:

async myFunctionThatDoesAllThis(...) {
....
for(let orderCode of this.orderCodes) {
  loadOrderDetails();
  const order = await getOrderDetails().pipe(take(1)).toPromise(); // Skip pipe(take(1)) if getOrderDetails is just an http request.
  if(order.results) {
     order.results.forEach((result) => {
        console.log(result.code);
     });
  }
}

Wait for each observable subscription to complete

Answer №1

Similar questions

Steps to creating a popup within an HTML page from another HTML page

Using the ASP.NET parameter or variable in both the application settings and application build events

Is it possible to load JavaScript code once the entire page has finished loading?

Reconfigure an ancestral item into a designated key

Executing a PHP function within the same file using AJAX: A step-by-step guide

What is the best way to use jQuery to retrieve information from one child element in an XML API in order to locate another child

Sending an interface object to a custom component using ngFor

The functionality of two-way data binding seems to be failing in Angular 2

What is the functionality of input onChange in React when using state management?

What is the best way to retrieve a service response prior to component initialization in Angular 4?

Replace existing styled-component CSS properties with custom ones

Stop the animation when the mouse is moved

Issue with Mongoose Promise failing to transfer data to the following chain

Utilize Webpack to integrate redux-form as an external library

Utilize an exported class as a type within a .d.ts file

Can you assist me in deciding between Javascript, jQuery, or AJAX?

What is the method for instructing the Typescript compiler to process JSX within .ts files?

Tips for implementing two functions to run within the onClick event handler in React

Button to scroll down

Utilizing a responsive design with a bootstrap grid system, featuring expandable columns for