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

Error in main.ts due to issues with importing components using an index.ts file

Assign a specific HTML class to serve as the container within an Angular directive

Navigating Unknown Properties in Angular: A Guide to Iterating Through Arrays

NextJS compilation sometimes results in undefined errors when using Sass styles

Is it possible to draw parallels between Java Callable and Angular Observable (RxJS) in terms of client implementation?

How to add an item to an array in JavaScript without specifying a key

Having trouble installing npm packages due to an error

Is it feasible to access and modify local files within an Angular project using TypeScript code in the angular component.ts file? If so, how can this be achieved?

Getting started with Angular 2 and initializing component variables

What is the essential Angular 2 script that must be included for a simple Angular 2 application to function properly?

Typescript TypeError: Unable to call function this.array[i].greet as it is not defined

Combine and transform multiple hierarchical JSONs into a new format

What is the best way to outline the specifications for a component?

Experience Next.js 13 with Chakra UI where you can enjoy Dark Mode without the annoying White Screen Flash or FOUC (flash of unstyled content)

npm encountered an error while trying to fetch the requested package when running ng new app

The situation I find myself in frequently is that the Angular component Input

Resetting an Angular form will clear the initially selected value

Dynamic Material UI Timeline

Eliminate the need for require statements in TypeScript-generated JavaScript files

The CSS files are not loading automatically in my React application using Vite