Tukukkk

How we can handle async methods in loops? I have a problem in an Angular program, I can't handle async methods. I want to wait for async methods.
is there any way to wait for async methods in for loop.

Here is my code:

msg: string = ;  



filePicked() {

    this.msg = ;

    this.msg.push("file picked");

    const file: File = new File([""], "C:UsersArun GirivasanDownloadsabout.jpg");



    for (var i = 0; i < 10; i++) {



        const reader = new FileReader();

        reader.onload = () {

        this.msg.push("file loaded successfully");

    }

    reader.readAsDataURL(file);





    this.msg.push(i.toString());

}

html:

<div *ngFor="let m of msg">{{m}}</div>

output:

file picked  

0  

1  

2  

3  

4  

5  

6  

7  

8  

9  

file loaded successfully  

file loaded successfully  

file loaded successfully  

file loaded successfully  

file loaded successfully  

file loaded successfully  

file loaded successfully  

file loaded successfully  

file loaded successfully  

I want output like :

file picked



file loaded successfully  

0  

file loaded successfully  

1  

file loaded successfully  

2  

file loaded successfully  

3  

file loaded successfully  

4  

file loaded successfully  

5  

file loaded successfully  

6  

file loaded successfully  

7  

file loaded successfully  

8  

file loaded successfully  

9  

How can I do this?

You'll need to extract the filereader code into another function and return a Promise or Observable.

private readFile(file: File): Observable<string> {

    return new Observable(obs => {

      const reader = new FileReader();

      reader.onload = () => {

        obs.next(reader.result as string);

        obs.complete();

      }

      reader.readAsDataURL(file);

    });

}

I prepared a quick example with Observable at https://stackblitz.com/edit/angular-pt3pbv

We can do it by looping the code with our own custom loop.

This work for me:

ngOnInit() {

    this.filePicked();

  }



  filePicked() {

    this.msg = ;

    this.msg.push("file picked");

    const file: File = new File(["abcd"], "C:UsersArun GirivasanDownloadsabout.jpg");



    this.customLoop(0, 10, file);

  }

  customLoop(index: number, limit: number, file: File) {

    this.readFileUrl(file, (msg: string) => {

      this.msg.push(msg);

      this.msg.push(index.toString());

      if (index < limit - 1) {

        this.customLoop(++index, limit, file);

      }

    });

  }

  readFileUrl(file: File, callback: (msg: string) => any) {

    const reader = new FileReader();

    reader.onload = (function (f) {

      return function (e) {

        callback("file loaded successfully");

      }

    })(file);

    reader.readAsDataURL(file);

  }