In my code in angular js, service function inside a loop executes only after completing all iterations

Question

Controller Page

    $scope.page = {
        '1' : "small",
        '2' : "large",
        '3': "medium"
    };      
    $scope.form.appraisal_id = "abc123";
    $scope.form.user_id = "efg123";
    for(var prop in $scope.page){
        $scope.form.question_id = prop;
        $scope.form.answer = $scope.page[prop]
        console.log($scope.form);
        appraisalService.saveForm($scope.form,function(result){
          $scope.sent=result
          console.log($scope.sent)
          });



};

My Result

Object {appraisal_id: "abc123", user_id: "efg123", question_id: "1", answer: "small"}

Object {appraisal_id: "abc123", user_id: "efg123", question_id: "2", answer: "large"}

Object {appraisal_id: "abc123", user_id: "efg123", question_id: "3", answer: "medium"}

Resource {__v: 0, appraisal_id: "abc123", user_id: "efg123", question_id: 3, answer: "medium"…}

Resource {__v: 0, appraisal_id: "abc123", user_id: "efg123", question_id: 3, answer: "medium"…}

Resource {__v: 0, appraisal_id: "abc123", user_id: "efg123", question_id: 3, answer: "medium"…}

Expecting output

Object {appraisal_id: "abc123", user_id: "efg123", question_id: "1", answer: "small"}

Object {appraisal_id: "abc123", user_id: "efg123", question_id: "2", answer: "large"}

Object {appraisal_id: "abc123", user_id: "efg123", question_id: "3", answer: "medium"}

Resource {__v: 0, appraisal_id: "abc123", user_id: "efg123", question_id: 1, answer: "small"…}

Resource {__v: 0, appraisal_id: "abc123", user_id: "efg123", question_id: 2, answer: "large"…}

Resource {__v: 0, appraisal_id: "abc123", user_id: "efg123", question_id: 3,answer: "medium"…}

@KevinB, lol that's the most concise, perfect answer I think I've ever seen... — Josh Beam, Aug 12 '15 at 04:56
There's nothing wrong with it, nothing to fix. It is working as intended. — Kevin B, Aug 12 '15 at 04:59
The weirdness you're seeing with the 3 console .logs of the resource being the same is due to how the console handles expanding objects. If you logged the question id from the resource instead, you would get 3 different id's. — Kevin B, Aug 12 '15 at 05:00
The problem is the saveForm function always saving the last iterated value. But i want to save all iterated values. how can i change this code to meet this? — Manju John, Aug 12 '15 at 05:55

score 0 · Accepted Answer · answered Aug 12 '15 at 06:11

Try using $q.

var promises = [];

for(var prop in $scope.page) {
    $scope.form.question_id = prop;
    $scope.form.answer = $scope.page[prop]

    promises.push(appraisalService.saveForm($scope.form, function(result){
      return result;
    }));
}

$q.all(promises).then(function(result) {
  console.log(result);
});

Your appraisalService call is async, so the loop is complete before even the first async call has time to complete (so it's only catching the last call).

You can instead push each promise of the appraisalService to an array, and then use $q.all to wait until all promises have resolved before logging the result (or doing whatever you want with it.)

If you're not familiar with $q, it comes with Angular. Just inject it.

In my code in angular js, service function inside a loop executes only after completing all iterations

1 Answers1