Calling multiple $http services in a for loop from Angularjs controller and services javascript promise issue

Question

My Angularjs application have a controller and services java scripts. Services call WCF REST services using $http. I need to call multiple services in a For loop based on data in object used in For loop. Below is the scenario:

"I want to upload few files to a folder on server and save file names to database. I have an array of file details that user selected to upload. I want to verify file names already in database (based on EntityId) then rename new file before uploading to server." So below is the for loop and service calls:

for (var i = 0; i < filesDataToUpload.length; i++) {

        var fileDataToUpload = filesDataToUpload[i];

        FileUploadService.GetUploadDetailsByEntityId(fileDataToUpload.ENTITY_ID).success(function (response) {
            $scope.UploadDetailsByEntity = response;
        });

        var newFileName = VerifyAndRenameBeforeSave(fileDataToUpload, $scope.UploadDetailsByEntity);

        FileUploadService.UploadFile(newFileName, fileData).success(function (data) {
            //some code
        }).error(function (error) {
            $scope.error("An error occured while uploading file -" + error.ExceptionMessage);
            isSuccess = false;
        });

        FileUploadService.InsertUploadDetails(FileUploadDetails).success(function (data) {
            //some code
        }).error(function (error) {
            $scope.error("An error occured while creating the Entity -" + error.ExceptionMessage);
            isSuccess = false;
        });

    }

Problem: Problem:

My problem is - I do not get the response from first service call that I want to use in subsequent methods of verifying and renaming the files and saving to database. I found that it is because of the promise behavior of $http. So I moved my file verify and renaming methods and save part of functionality inside the

.success(function(response){
//verify that file does not already exists and rename it to the next number of file
//upload the file to the server

//Save new file name and other details to the database
}

But it works only for first time and not the next iteration of the for loop. For second iteration it retrives the record for first EntityId.

I already checked this and this

Can any one help me to get this resolved?

atefth · Accepted Answer · 2016-04-06 18:05:06Z

1

It's happening because the .success function returns a promise while it actually waits for the async task's response. Try it like this -

for (var i = 0; i < filesDataToUpload.length; i++) {
        var fileDataToUpload = filesDataToUpload[i];
        FileUploadService.GetUploadDetailsByEntityId(fileDataToUpload.ENTITY_ID).success(function (response) {
            $scope.UploadDetailsByEntity = response;
            var newFileName = VerifyAndRenameBeforeSave(fileDataToUpload, $scope.UploadDetailsByEntity);

            FileUploadService.UploadFile(newFileName, fileData).success(function (data) {
                    //some code
                    FileUploadService.InsertUploadDetails(FileUploadDetails).success(function (data) {
                            //some code
                    }).error(function (error) {
                            $scope.error("An error occured while creating the Entity -" + error.ExceptionMessage);
                            isSuccess = false;
                    });
            }).error(function (error) {
                    $scope.error("An error occured while uploading file -" + error.ExceptionMessage);
                    isSuccess = false;
            });
        });
}

answered Apr 6, 2016 at 18:05

atefth

1,62313 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anil J Baviskar Over a year ago

Thanks @atefth, I tried doing that but my for loop itself does not wait to complete first iteration and finishes then later on my .success returns result.

Anil J Baviskar Over a year ago

For some reasons, I decided to change my implementation logic that avoided this issue. I am doing it like below:

Anil J Baviskar Over a year ago

1. Moved the FileUploadService.GetUploadDetailsByEntityId and VerifyAndRenameBeforeSave logic to happen on the fly when user selects each file to upload (I want to select one file at a time and not multiple files). This helped me to avoid problematic service call to be executed inside the for loop. 2. I moved rest of the For loop code in a function. ` angular.forEach(filesDataToUpload, function (fileDataToUpload) { loop(fileDataToUpload); }, 1000);`

Collectives™ on Stack Overflow

Calling multiple $http services in a for loop from Angularjs controller and services javascript promise issue

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related