Await a recursive For loop in Angular 8

Question

Having problems in receiving result from a recursive for loop. I am doing a recursion to get "cars" and "ships" for "myArray" but it is not awaiting. So when I hit to download the json, the json comes without "cars" and "ships". In the console i see that the recursion finishes after I hit the download.

Any ideias how can await to receive result from recursive for loop and just then start the download?

myservice.ts ----------------------------------------------------------------------

 public async callData(): Promise<myType> {
    return new Promise<myType>(async (resolve, reject)=>{
        this.toDownload.myArray = await this.loop(this.toDownload.myArray);
        resolve(this.toDownload);
    });
  }


  private async loop(myArray:[]): Promise<myArray[]> {
      return new Promise<myArray[]>(async (resolve, reject) => {
        for (let i: number = 0; i < myArray.length; i++) {
            myArray[i].id = .....
            myArray[i].cars = this.carsArray.find(....)
            myArray[i].ships = this.shipArray.find(....)
            if (myArray[i].subMyArray.length !== 0) {
               await this.loop(myArray[i].subMyArray);
            } 
        }
        resolve(myArray);
      });
  }

mycomponent.ts-----------------------------------------------------------------

public async donwload(){
this.myArray = await myservice.callData();
// this.myArray comes without .cars and .ships
const jsonStr: string = JSON.stringify(this.myArray);

}

In the console you would see something like this if put console.log in each method:

1

2

3

(15) 2 // in other words calling again the loop method 15 times

The code you provided would give you an error `'await' expression is only allowed within an async function` — yurzui, Apr 18 '20 at 18:39
Thanks. Now I would love to see a real example in stackblitz since this code looks good to me — yurzui, Apr 18 '20 at 18:42
[Never pass an `async function` as the executor to `new Promise`](https://stackoverflow.com/q/43036229/1048572)! — Bergi, Apr 18 '20 at 20:24
So you have observables available and you opt to use promises? Why? — MikeOne, Apr 18 '20 at 22:06

score 0 · Answer 1 · answered Apr 18 '20 at 20:17

I think that array.prototype.find() is synchronous and therefore it doesn't support promises, it is a function that was thought to run synchronously. I suggest you to have a look at this post from StackOverflow with an issue that is like the one you posted. Maybe you find this useful.

Using an async function in Array.find()

Await a recursive For loop in Angular 8

1 Answers1