CODEWITHSUNDEEP
angulartypescript
Jim
Jim

Reputation: 2828

Angular Synchronous For loop

in angular 5 how can I execute For loop in synchronous way. I have so far the below code which doesnt 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;
    }
}

Upvotes: 1

Views: 4960

Answers (2)

carlokid
carlokid

Reputation: 227

EDIT : You cannot simply mix sync (for-loop) with async. This approach eliminate use of for-loop but should be able to resolve what you are trying to achieve from your question.

export class AppComponent {

  ngOnInit() {
    this.method();
  }

  i: number = 0;

  // let's say async will exit after this.i reached 5
  items = 5;//new Array<Item>(); 

  method() {
    this.asyncMethod().then((result) => {
      if (this.i > 10) return;

      if (result === 'exit') { // break the async recursive call
        return;
      }
      else {
        this.i += 1;
        this.method(); // do recursive call while this.i <= 10000 and items.length < this.i
      }
    });
  }

  asyncMethod() {
    return new Promise((resolve) => {
      let currLoop = new Promise((resolve, reject) => {
        // mimic async function using timeout
        // replace your async function here, don't forget to indicate resolve() when function is done
        setTimeout(() => {
          resolve();
        }, 3000);
      }).then(() => {
        // exit condition
        if (this.items < this.i) {
          resolve('exit');
        } else {
          resolve('done');
        }
      });
    });
  }
}

Upvotes: 1

Titian Cernicova-Dragomir
Titian Cernicova-Dragomir

Reputation: 250266

There is no way to wait synchronously for an async operation to complete, and you wouldn't want to do it even if you could as that would block the browser UI.

You can either chain together then calls or for a more synchronous look to the async code you can use async /await

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;
            }

        }
    }
}

You can read more about async /await here for example, it's worth mentioning this is not exclusive to Typescript, Javascript is getting async await as well

Upvotes: 2

Related Questions