Looping in Angular with promises and http calls - arrays

Question

my goal is to populate an array via for loop. and then send that array in HTTP POST call,
i.e: first upload all the files, then push each file details in array.
// For multiple files
for (let i = 0; i < projectRefFilesForUploading.length; i++) {
this.postSingleFile([] = projectRefFilesForUploading[i].file, projectDir).then(uploadedFiles => {
let filePath = uploadedFiles['projectRefFiles'][0].fd;
filePath = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."));
let filename = uploadedFiles['projectRefFiles'][0].filename;
let size = uploadedFiles['projectRefFiles'][0].size;
let type = uploadedFiles['projectRefFiles'][0].type;
let status = uploadedFiles['projectRefFiles'][0].status; // finished
let fileNote = projectRefFilesForUploading[i].fileNote;
projectRefFilesDataArray.push({fileName: filename, filePath: filePath, size: size, type: type, fileNote: fileNote});
});
}
i.e: now post the array in http post call.
let body = {
projectId: projectId,
projectRefFiles: projectRefFilesDataArray
}
let headers = new Headers();
let options: RequestOptionsArgs = { headers: headers, withCredentials: true }
return new Promise((resolve, reject) => {
this.http.post( this.apiEndpoint + "/add/all", body, options).toPromise()
.then(response => {
let jsonData = response.json();
if (jsonData.apiStatus == 1) {
resolve(jsonData);
}
else reject(jsonData.message);
})
.catch(reason => reject(reason.statusText));
});
the problem is due to async function calls, http call post its data in parallel to loop execution. so it sends an empty array in http call. if I put the call method inside the loop then it works. but it created too much http call along with looping.
please help me how to detect, loop finishes it execution then after http call

Answer 1

try this :
let promise = new Promise((resolve, reject) => {
let count = 0;
for (let i = 0; i < projectRefFilesForUploading.length; i++) {
this.postSingleFile([] = projectRefFilesForUploading[i].file, projectDir).then(uploadedFiles => {
count++;
let filePath = uploadedFiles['projectRefFiles'][0].fd;
filePath = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."));
let filename = uploadedFiles['projectRefFiles'][0].filename;
let size = uploadedFiles['projectRefFiles'][0].size;
let type = uploadedFiles['projectRefFiles'][0].type;
let status = uploadedFiles['projectRefFiles'][0].status; // finished
let fileNote = projectRefFilesForUploading[i].fileNote;
projectRefFilesDataArray.push({fileName: filename, filePath: filePath, size: size, type: type, fileNote: fileNote});
if(count === projectRefFilesForUploading.length){
resolve(projectRefFilesForUploading);
}
});
}
});
promise.then(function(projectRefFilesDataArray){
let body = {
projectId: projectId,
projectRefFiles: projectRefFilesDataArray
}
let headers = new Headers();
let options: RequestOptionsArgs = { headers: headers, withCredentials: true }
return new Promise((resolve, reject) => {
this.http.post( this.apiEndpoint + "/add/all", body, options).toPromise()
.then(response => {
let jsonData = response.json();
if (jsonData.apiStatus == 1) {
resolve(jsonData);
}
else reject(jsonData.message);
})
.catch(reason => reject(reason.statusText));
});
});