Iteration in Angular using ForEach Statement

Question

Iteration in Angular using ForEach Statement

Can anyone help me with executing a For loop synchronously in Angular 5? The code I have so far doesn't wait until ExcecuteAsyncCode is completed.

let items = new Array<Item>();

for (let i = 0; i <= 10000; i += 1) {

    this.ExcecuteAsyncCode(i).then(
    res => {
        let result = res;
        return result;
    }).then(response => {
        let temp = response as Item[];
        temp.forEach((cta: Item) => {   
          items.push(cta);
        });
    });

    // THIS EXCECUTED BEFORE ExcecuteAsyncCode PROMISE COMPLETED
    if (items.length < i) {
        return;
    }
}

angular typescript

Answer 1

Answer №1

Waiting synchronously for an async operation to complete is not possible, and even if it were possible, it would not be recommended as it could potentially block the browser UI.

To handle asynchronous operations, you can either chain together then calls or utilize async /await for a more synchronous-looking code structure.

interface Item{
    id:number
}
class Test{
    async ExecuteAsyncCode(i:number) {
        return [] as Item[]
    }
    async method() {
        let items = new Array<Item>();

        for (let i = 0; i <= 10000; i += 1) {

            let temp = await this.ExecuteAsyncCode(i);
            temp.forEach((cta: Item) => {
                items.push(cta);
            });

            if (items.length < i) {
                return;
            }

        }
    }
}

If you want to learn more about async /await, you can visit this resource. It's important to note that async await is not limited to Typescript, but it's also being implemented in Javascript.

Answer 2

Waiting synchronously for an async operation to complete is not possible, and even if it were possible, it would not be recommended as it could potentially block the browser UI.

To handle asynchronous operations, you can either chain together then calls or utilize async /await for a more synchronous-looking code structure.

interface Item{
    id:number
}
class Test{
    async ExecuteAsyncCode(i:number) {
        return [] as Item[]
    }
    async method() {
        let items = new Array<Item>();

        for (let i = 0; i <= 10000; i += 1) {

            let temp = await this.ExecuteAsyncCode(i);
            temp.forEach((cta: Item) => {
                items.push(cta);
            });

            if (items.length < i) {
                return;
            }

        }
    }
}

If you want to learn more about async /await, you can visit this resource. It's important to note that async await is not limited to Typescript, but it's also being implemented in Javascript.

Answer 3

Answer №2

UPDATE: It's important to note that mixing synchronous (for-loop) and asynchronous code can lead to complications. The following approach removes the for-loop but still accomplishes the intended goal based on your query.

export class AppComponent {

  ngOnInit() {
    this.executeMethod();
  }

  counter: number = 0;

  // Suppose the async process will stop once the counter reaches 5
  items = 5; 

  executeMethod() {
    this.asyncProcess().then((result) => {
      if (this.counter > 10) return;

      if (result === 'exit') { 
        return;
      }
      else {
        this.counter += 1;
        this.executeMethod(); 
      }
    });
  }

  asyncProcess() {
    return new Promise((resolve) => {
      let currentAsyncTask = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 3000);
      }).then(() => {
        if (this.items < this.counter) {
          resolve('exit');
        } else {
          resolve('done');
        }
      });
    });
  }
}

Answer 4

UPDATE: It's important to note that mixing synchronous (for-loop) and asynchronous code can lead to complications. The following approach removes the for-loop but still accomplishes the intended goal based on your query.

export class AppComponent {

  ngOnInit() {
    this.executeMethod();
  }

  counter: number = 0;

  // Suppose the async process will stop once the counter reaches 5
  items = 5; 

  executeMethod() {
    this.asyncProcess().then((result) => {
      if (this.counter > 10) return;

      if (result === 'exit') { 
        return;
      }
      else {
        this.counter += 1;
        this.executeMethod(); 
      }
    });
  }

  asyncProcess() {
    return new Promise((resolve) => {
      let currentAsyncTask = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 3000);
      }).then(() => {
        if (this.items < this.counter) {
          resolve('exit');
        } else {
          resolve('done');
        }
      });
    });
  }
}

Iteration in Angular using ForEach Statement

Answer №1

Answer №2

Similar questions

Ways to merge various input values

Utilize rxjs to effectively handle API data responses and efficiently manage the state of your application within Angular 10

Troubleshooting Office-Js Add-ins using Angular-CLI and F12chooser: Map files not visible

What methods are most effective for integrating a Loading indicator into a redux-saga application?

Exploring the Functionality of PeerJS and Angular4: Controlling Camera and Microphone Access During Streaming

Ways to turn off automatic opening of Google login prompt

Execute Angular within a designated directory

How can I display an agm-polyline within a map in Angular 7?

Exploring Generics and Type Inference within TypeScript

Steps for transforming a .Net Core 2.2 / Angular 8 application into a Progressive Web App

What is the process for running an npm package command on a specific subdirectory using PowerShell?

Incorporating parent ID data into hierarchical property structures

What is the process of mapping an object from a JSON file to a different object?

Dealing with a 404 Error in Instagram API Using RXJS

Using Angular 2+, learn how to effectively utilize and monitor the output emitter when utilizing the createComponent factory method

The type 'HTMLDivElement | null' cannot be assigned to the type 'HTMLDivElement' in this context

rxjs module is mysteriously missing in Visual Studio 2019, yet it can be easily located when using the t

Enumerated Types in Typescript

Managing Deactivated Elements in Ionic Web Edition

How to retrieve the current validators for a form control in Angular 2