In my case ill get data but the data did not sort according to the request I want when I call the first HTTP request it first assigns value back to my array then moves to the next API call but in this case, the data es unsorted or did not assign the right id to my array.

this.imagesdataarray.forEach(imagedata => {
imagedata.imagesnamearray.forEach(imagename => {
const fd = new FormData();
fd.append('userID', this.userid );
fd.append('projectID', imagedata.projectid);
fd.append('id', imagename.imageid);
fd.append('formFiles', imagename.image);


this.http
.post('', fd)
.subscribe( async (res) => {
imagename.imageid = await res.result;
});

})
});

In my case ill get data but the data did not sort according to the request I want when I call the first HTTP request it first assigns value back to my array then moves to the next API call but in this case, the data es unsorted or did not assign the right id to my array.

this.imagesdataarray.forEach(imagedata => {
imagedata.imagesnamearray.forEach(imagename => {
const fd = new FormData();
fd.append('userID', this.userid );
fd.append('projectID', imagedata.projectid);
fd.append('id', imagename.imageid);
fd.append('formFiles', imagename.image);


this.http
.post('http://api.interiordesigns2020./api/services/app/ImageProject/CreateProjectImages', fd)
.subscribe( async (res) => {
imagename.imageid = await res.result;
});

})
});

• javascript
• angular
• typescript
• http
• asp-core

Share Improve this question Follow asked Mar 10, 2021 at 7:45 Syed MatiullahSyed Matiullah 711 gold badge11 silver badge44 bronze badges 1

• I don't understand why you use async/await here. The Angular HTTPClient returns an observable for each of its request (post, put, delete...). You just need to subscribe to it. Please, try removing async and await from your code. Also I'd remend reading a bit about rxjs. – Pizzicato Commented Mar 10, 2021 at 8:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You need to use toPromise() in this case with await keyword. It will wait for request to plete before moving to next loop and sending new request.

var res= await this.http
.post('http://api.interiordesigns2020./api/services/app/ImageProject/CreateProjectImages', fd).toPromise();

imagename.imageid = res.result;

Remember to use async keyword accordingly.

Here is my way:

   this.imagename.imageid = await new Promise<any>(resolve =>  this.http.post('http://api.interiordesigns2020./api/services/app/ImageProject/CreateProjectImages', fd)
    .subscribe( res => { resolve(res.result);
    //imagename.imageid = res.result;}
));
// Remaining code or function call

Please, convert an Observable to Promise is not a good solution. The great of observables are that you can join, merge,forkjoin, swhitchMap..

In this case You should use map to create an array of observables and use forkJoin to make an unique subscribe

//create an array of observables
const obs$=this.imagesdataarray.map(imagename =>{
    const fd = new FormData();
      fd.append('userID', this.userid );
      fd.append('projectID', imagedata.projectid);
      fd.append('id', imagename.imageid);
      fd.append('formFiles', imagename.image);
      return this.http.post('http://.....', fd)
  })

//subscribe to a forkJoin of the array of observables
//"res" is an array with the response to the first call, the second call..
//so you can in subscribe use some like:
forkJoin($obs).subscribe((res:any[],index)=>{
   this.imagesdataarray[index].response=res[index];
})

BTW, you can use directy -it's not necesary formData-

const obs$=this.imagesdataarray.map(imagename =>{
    const fd = {'userID':this.userid,
                'projectID':imagedata.projectid,
                'id':imagename.imageid,
                'formFiles':imagename.image
               }
      return this.http.post('http:...', fd)
  })