等待调用函数完成，然后再进行迭代

Question

I am in a bit of a bind here regarding a code I have to write. At the moment I am trying to iterate through an array of strings. After a certain text is found, if a value is true, the value is bound to a temporaryObject.img. After that a call has to be made to the server in order for some information to be retrieved and to be bound to the same temporaryObject as a second property (temporaryObject.url). Unfortunately, the call is resolved probably after the iteration is done because it does not add this add the url from the call to the server in the Object. The libraries I am using are angularjs and jquery.

Here is a part of the code I wrote.

$scope.Data = [];
var strArray = ["img1", "link", "img2", "link2", "img3", "link3"];
var re1 = /<img/;
for(var i = 0 ; i < strArray.length ; i++) {
    var tempObject = {};
    var test = re1.test(strArray[i]);
    if (test){
    tempObject.img = strArray[i + 1];
    myAngularService.getServerInformation().then(function(result){
        tempObject.url = result;
        $scope.Data.push(tempObject);
    }
   }

Unfortunately, the information from the server does not arrive in the same time as the iteration is done or something goes wrong since $scope.Data will not contain the url requested from the server. Any suggestions as how to use maybe a promise for this kind of code would be appreciated. I tried searching every possible solution but with no avail.

Answer 1

Javascript is function-scoped. In other words:

if (true) {
    var testing = 5;
}
console.log(testing); // Logs 5

Applying this to your example, tempObject in your .then callback function are all referencing the same variable!

One solution is to use an Immediately-Invoked Function Expression (IIFE) inside your for statement to create a new scope:

for(var i = 0 ; i < strArray.length ; i++) {
    (function() {
        var tempObject = {}; // Is now declared within the new function
        /* ... code here ... */
    })();
}

Another solution is to simply use $.each (or angular.forEach ):

$.each(strArray, function(index, value) {
    var tempObject = {}; // Is now declared within the new function
    /* ... code here ... */
}); 

Regarding waiting for all your calls to finish, one solution is to store your promises in an array use angular's $q service:

$scope.Data = [];
var promises = [];
var strArray = ["img1", "link", "img2", "link2", "img3", "link3"];
var re1 = /img/;
$.each(strArray, function (index, value) {
    var tempObject = {};
    var test = re1.test(value);
    if (test) {
        tempObject.img = strArray[index + 1];

        var myPromise = myAngularService.getServerInformation();

        myPromise.then(function (result) {
            tempObject.url = result;
            $scope.Data.push(tempObject);
        }

        promises.push(myPromise);
    }
})

$q.all(promises).then(function() {
    // All calls will have finished
    console.log($scope.Data); 
}, function() {
    // At least 1 call failed!
    console.log("an error occurred!");
});