AngularJS promise not working

Question

I have a promise that runs without a problem when it runs during application start, e.g.

myPromise
    .success( function(data) { $scope.myvariable = data })
    .error( function(msg, code) { console.log("msg: " + msg + "\nCode" + code) });

However if I try to run the promise dynamically, let's say when a button is clicked, (1) the promise executes successfully but none of my variables are updated.

running apply or digest only produces the following error: $digest already in progress

$scope.getContent = function() {
        myPromise
            .success( function(data) { 
                $scope.myVariable = data; //THIS WORKS 
                console.log(data); //THIS WORKS
            })
    }
    //Running the below code afterwards still produces a null value 
    console.log($scope.myVariable);

The ng-click was placed inside a link, <a href="#" ng-click="getContent()> so whenever you clicked the link the promise got executed however the page was refresh therefor clearing the value it got. Thanks for the answers though, I'm sure it will help others in the future. — Dennis
– Dennis, Commented Apr 7, 2015 at 17:19

squiroid · Accepted Answer · 2015-04-07 07:08:53Z

1

This is what we called as async world.

When you are waiting for the callback of your promise the statement console.log($scope.myVariable); already executed but still you don't have any value in it.

In that case you can use $watch if you want to get it value outside.

$scope.$watch('myVariable',funciton(newVal){
 console.log(newVal);
});

Little Detail:-

myPromise is invoked and waiting for the response in the meanwhile the statement console.log($scope.myVariable); after it executed which obviously doen't have any value for $scope.myVariable inside it (nobody gave it :-P). So when response came back it call the success or error method and initialize the value to your variable $scope.myVariable and print it.

answered Apr 7, 2015 at 7:08

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

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

Comments

Satyam Koyani · Accepted Answer · 2015-04-07 07:11:08Z

1

Here your console.log($scope.myVariable); statement executes before success callback so here you need to do .then() chaining or apply watch on scope variable.

answered Apr 7, 2015 at 7:11

Satyam Koyani

4,2842 gold badges26 silver badges49 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:50:44Z

The reason your console.log, which comes after your promise logs null is because it is executing before your promise returns. Even though the function using the promise has run, the success part of the code has not fired yet. The code hits the promise, makes the calls, creates the promise object, and moves on. When the promise returns, it fills in the empty promise object with the returned data. This is happening after your

 console.log($scope.myVariable);

A good way maybe to handle it is to store the returned value in a variable. Inside the success set the variable to the returned data, then use a function like

$scope.myVariable = undefined;
$scope.getContent = function() {
    myPromise
        .success( function(data) { 
            $scope.myVariable = data; //THIS WORKS 
            console.log(data); //THIS WORKS
        })
}
function checker() {
    if($scope.myVariable) {
         console.log($scope.myVariable); 
    }
}

Then you can call that function as needed.

Depending on what you are doing and when your getContent function needs to run, you may want to use this with ui-router, and use resolve, which will run these functions before the page loads, thereby ensuring you have data to work with when the DOM loads. AngularJS UI-Router: preload $http data before app loads

Sanjay B · Accepted Answer · 2015-04-07 07:08:29Z

0

I think promise object makes call only once,when controller is initialized

you have to reinitialize controller,to get new updated values from server

answered Apr 7, 2015 at 7:08

Sanjay B

2111 gold badge4 silver badges12 bronze badges

Comments

Omkara · Accepted Answer · 2015-04-07 08:53:47Z

0

A. Call sequence will be as follows when DOM ready: 1. $scope.getContent will get initialized. 2. then execution : console.log($scope.myVariable);

B. Async call: 1. If success then below statement will get executed. $scope.myVariable = data; //THIS WORKS

Above point A and B are independent. Execution is asyc here. Hope this will help you understand. Enjoy.

answered Apr 7, 2015 at 8:53

Omkara

4344 silver badges16 bronze badges

Comments

AlainIb · Accepted Answer · 2015-04-07 09:05:43Z

0

Maybe this can help :

// a service providing data with async call
app.service('myService', function(elasticQuery) {
    this.getData = function (a,b,c) {
      // don't forget the 2 return 
      return elasticQuery.search({
         // make ajax call 
      }).then(function (response) {
         return response
      });
    };  
});


// in my controller 
// scope.getData is lunch with ng-click in the view
$scope.getData = function(a,b,c){
    myService.getData( a,b,c ).then(function (data) {
       $scope.myVariable  = data;          
    });
 };

answered Apr 7, 2015 at 9:05

AlainIb

4,6257 gold badges42 silver badges67 bronze badges

Collectives™ on Stack Overflow

AngularJS promise not working

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related