Using closure with a promise in AngularJS

Question

I don't have a lot of experience with JavaScript closures nor AngularJS promises. So, here is my scenario

Goal:

I need to make $http requests calls within a for loop

(Obvious) problem

Even though the loop is done, my variables still have not been updated

Current implementation

function getColumns(fieldParameters)
{
    return $http.get("api/fields", { params: fieldParameters });
}

for(var i = 0; i < $scope.model.Fields.length; i++)
{
    var current = $scope.model.Fields[i];

    (function(current){
        fieldParameters.uid = $scope.model.Uid;
        fieldParameters.type = "Columns";
        fieldParameters.tableId = current.Value.Uid;                    
        var promise = getColumns(fieldParameters);                  
        promise.then(function(response){
           current.Value.Columns = response.data;
        }, error); 
    })(current);                                                                     
}

//at this point current.Value.Columns should be filled with the response. However
//it's still empty

What can I do to achieve this?

Thanks

peterholcomb · Accepted Answer · 2016-08-05 16:07:24Z

1

If I understand your question correctly, you have a list of fields that you need to do some work on. Then when all of that async work is done, you want to continue. So using the $q.all() should do the trick. It will resolve when all of the list of promises handed to it resolve. So it's essentially like "wait until all of this stuff finishes, then do this"

You could try something like this:

var promises = [];

for(var i=0; i< $scope.model.Fields.length; i++) {
  var current = $scope.model.Fields[i];
  promises.push(getColumns(fieldParameters).then(function(response) {
    current.Value.Columns = response.data;
  }));
}

return $q.all(promises).then(function() {
  // This is when all of your promises are completed.
  // So check your $scope.model.Fields here. 
});

EDIT:

Try this since you are not seeing the right item updated. Update your getColumns method to accept the field, the send the field in the getColumns call:

function getColumns(fieldParameters, field)
{
    return $http.get("api/fields", { params: fieldParameters}).then(function(response) {
field.Value.Columns = response.data;
    });
}


...

promises.push(getColumns(fieldParameters, $scope.model.Fields[i])...

edited Aug 5, 2016 at 16:07

answered Aug 5, 2016 at 15:21

peterholcomb

845 bronze badges

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

4 Comments

Luis Lavieri Over a year ago

It works however the data is not been updated to the right current object. That's why I think I need a closure here. I'm going to upvote you anyway for the partial answer.

peterholcomb Over a year ago

@LuisLavieri See my edit above. I think that should do the trick.

Luis Lavieri Over a year ago

Thanks. That was very close. I had to pass freaking i and populate the fieldParameter object inside the $http to make it work at the end

peterholcomb Over a year ago

The important thing @LuisLavieri is that you believed in yourself. Never give up. ;)

tjones0808 · Accepted Answer · 2016-08-05 15:21:15Z

1

  var promises = [];      

  for(var i = 0; i < $scope.model.Fields.length; i++)
  {
     var current = $scope.model.Fields[i];
     promises.push(function(current){
         //blahblah 
         return promise
     });
  }


  $q.all(promises).then(function(){
      /// everything has finished all variables updated
  });

answered Aug 5, 2016 at 15:21

tjones0808

1561 silver badge12 bronze badges

1 Comment

Luis Lavieri Over a year ago

It works however the data is not been updated to the right current object. That's why I think I need the closure here. However, I am still going to upvote you for the partial answer. Thanks

Collectives™ on Stack Overflow

Using closure with a promise in AngularJS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related