How to wait for, for loop's next iteration to get the response from an API in angular?

Question

I am learning angular. I am calling a function in a for loop. The function is calling an API request and getting some response from server. I am uploading multiple file with some data.

While calling the API request its taking the random file with the data from the files Array in formData.

The problem is that the data is uploading according to the particular index of file like in first iteration there should be first file with the data and in second iteration there should be 2nd file, but the formData is taking next or sometimes previous file from the Array of files.

I want to wait until to get the response from API then processed the next iteration. How to achieve that? My Code is below: The generate() function is called on button click after browsing multiple files. and the variable -: this.filesToUpload contains multiple files.

generate() {
    for(var i = 0; i<this.data.length; i++){
        var name= this.data[i];
        if(this.data.length != 10){
            this.alertService.danger('Name');
            return false;
        }else{
            this.uploadData2(name, i)
        }          
    }
}

uploadData2(myname, loopIndex) {
   var body = {number:"1234"}

   this.http.post(URL, body)
            .subscribe((data: any) => {
              uploadData3(myname, loopIndex);
            });

}

uploadData3(myname, loopIndex) {
   var formData = new FormData();
   const files: Array<File> = this.filesToUpload;
   formData.append("uploads[]", files[loopIndex], files[loopIndex]['name']);
   formData.append("myname", myname);

   this.http.post(URL, formData)
            .subscribe((data: any) => {
              //ressponse here
            });

}

Answer 1

As suggested in the comments; please invest some time to learn RxJS. This will help you when you're working with asynchronous calls (and functions) like in your code.

One way of solving your puzzle is to generate an Observable Array with httpCalls to the server and then subscribe to them (fi with merge() if you want to execute the calls in parallel or with concat() if you want to process them in the order of the array).

It will take some time to learn, but you will not regret that!.

generate() {
    let obsArray = Observable<any>[]=[];
    for(var i = 0; i<this.data.length; i++){
        var name= this.data[i];
            obsArray.push(this.uploadData2(name, i))          
    }
    concat(obsArray).subscribe(res=>console.log("After merge:",res))
}

uploadData2(myname, loopIndex) {
   var body = {number:"1234"}

   return this.http.post(URL, body)
      .pipe()
            mergeMap(data => 
              uploadData3(myname, loopIndex);
            );

}

uploadData3(myname, loopIndex) {
   var formData = new FormData();
   const files: Array<File> = this.filesToUpload;
   formData.append("uploads[]", files[loopIndex], files[loopIndex]['name']);
   formData.append("myname", myname);

   return this.http.post(URL, formData)
        .pipe(tap(... some side effects here...))

}

The code is not tested, but should give you an idea on how it should look.