Tips for ensuring that the code inside a subscribe block completes before moving on to the next iteration within a forEach loop in Angular

Question

Tips for ensuring that the code inside a subscribe block completes before moving on to the next iteration within a forEach loop in Angular

Within the code snippet below, there exists a for loop where an API call is made. The intention is to have the 1st API call complete and execute all the subscribed code before moving on to the next iteration of the loop, triggering another API call.

Currently, the APIs are running concurrently rather than sequentially as desired.

                      parentLevelIdArray.forEach(parentLevelId => {
                        this.locModService.deleteAPI(parentLevelId, levelObj.id)
                        .subscribe((response) => {
                          if (response.status === 200) {
                            this.message = 'Image uploaded successfully';
                            this.getSublevels();
                            this.getAllLinkedLevel();
                          } else {
                            this.message = 'Image not uploaded successfully';
                          }
                        }
                        )
                      });

Despite searching through various stackoverflow threads, I have yet to find a suitable solution tailored to my specific scenario. Any assistance would be greatly appreciated.

angular typescript observable angular-promise angular-observable

Answer 1

Answer №1

To achieve this, I recommend converting it into an array of observables:

const tasks = parentLevelIdArray.map((parentLevelId) => this.locModService.deleteAPI(parentLevelId, levelObj.id))

By doing this, you can then use the concat method to execute them sequentially as required:

concat(tasks).subscribe((response) => {
  if (response.status === 200) {
    this.message = 'Image uploaded successfully';
    this.getSublevels();
    this.getAllLinkedLevel();
  } else {
    this.message = 'Image not uploaded successfully';
  }
}

Answer 2

To achieve this, I recommend converting it into an array of observables:

const tasks = parentLevelIdArray.map((parentLevelId) => this.locModService.deleteAPI(parentLevelId, levelObj.id))

By doing this, you can then use the concat method to execute them sequentially as required:

concat(tasks).subscribe((response) => {
  if (response.status === 200) {
    this.message = 'Image uploaded successfully';
    this.getSublevels();
    this.getAllLinkedLevel();
  } else {
    this.message = 'Image not uploaded successfully';
  }
}

Answer 3

Answer №2

I have come up with a solution using recursion.

Original method --

let lastIndex = parentLevelIdArray.length - 1;
this.recursiveDelete(parentLevelIdArray, levelObj, lastIndex);

Method being called --

recursiveDelete(parentLevelIdArray, levelObj, lastIndex) {
      if(lastIndex >= 0) {
        this.locModService.deleteAPI(parentLevelIdArray[lastIndex], levelObj.id)
        .subscribe((response) => {
          //console.log("Inside subscribe()...");
          if (response.status === 200) {
            this.message = 'Image uploaded successfully';
            this.getSublevels();
            this.getAllLinkedLevel();
            lastIndex = lastIndex - 1;
            this.recursiveDelete(parentLevelIdArray, levelObj, lastIndex);
          } else {
            this.message = 'Image not uploaded successfully';
          }
        }
        )
      }
  }

Answer 4

I have come up with a solution using recursion.

Original method --

let lastIndex = parentLevelIdArray.length - 1;
this.recursiveDelete(parentLevelIdArray, levelObj, lastIndex);

Method being called --

recursiveDelete(parentLevelIdArray, levelObj, lastIndex) {
      if(lastIndex >= 0) {
        this.locModService.deleteAPI(parentLevelIdArray[lastIndex], levelObj.id)
        .subscribe((response) => {
          //console.log("Inside subscribe()...");
          if (response.status === 200) {
            this.message = 'Image uploaded successfully';
            this.getSublevels();
            this.getAllLinkedLevel();
            lastIndex = lastIndex - 1;
            this.recursiveDelete(parentLevelIdArray, levelObj, lastIndex);
          } else {
            this.message = 'Image not uploaded successfully';
          }
        }
        )
      }
  }

Tips for ensuring that the code inside a subscribe block completes before moving on to the next iteration within a forEach loop in Angular

Answer №1

Answer №2

Similar questions

React Native: Once a user has successfully logged in, I would like the app to automatically direct them to the "Home" screen

A more efficient method for incorporating types into props within a functional component in a TypeScript-enabled NextJS project

Adding Material-UI icons dynamically in a React TypeScript project requires understanding the integration of imported icons

Errors caused by Typescript transpilation only manifest on the production server

Generating a new object using an existing one in Typescript

Tips for including additional properties to a <button> element using ReactJS and Typescript

Using Angular 2's ngFor directive to iterate through arrays with access to first, last

Achieving asynchronous results in the parent function with TypeScript: a guide

ServiceWorker has responded with a 503 OK status code

The existence of useRef.current is conditional upon its scope, and it may be null in certain

What is the return type of the Array.prototype.sort() method in Typescript?

Angular findIndex troubleshooting: solutions and tips

Ways to attach an event listener to a useRef hook within a useEffect hook

Allow Ionic to exclusively work on Android smartphones

Format Currency Fields with Comma Separated Values in Angular and Material UI

Exploring the world of Typescript TSX with the power of generic

Problem Encountered in Angular 4 CLI when using enableProdMode in Internet Explorer 11

Issue with Angular 2 Teamcity Error

Collaborate on a component used in multiple modules

What is the process of extending a class in TypeScript?