Angular processing not waiting on http.get .then

Question

I have a an issue where it seems as though my controller is not waiting on the http.get '.then'. I am getting data properly back but it seems as though another function is processing before the data is retrieved. I've gone through many posts and have tried many of the things mentioned in those posts, but it doesn't seem to help. I am using PHP to retrieve the data.

I have a HTML file that calls two functions (I had tried with one, but when that didn't work, I tried splitting up the functionality).

HTML of the calls

<form editable-form name="editableForm" onaftersave="fetch();updateDetailsData()" >

Controller functions

$scope.fetch = function() {
    $http.get("api/checkSave/"+ JSON.stringify($scope.programDetails))
         .then(function(data) {
              $scope.okToSave = data.data.save;
              $scope.missFields = data.data.fields;
              console.log($scope.okToSave); // line #194
              console.log($scope.missFields); // line #195
        });
}

$scope.updateDetailsData = function(){
    console.log($scope.okToSave); // line #202
}

What displays in the console shows:

undefined    // line 202
false        // line 194 - correct data
Object       // line 195 - correct data

As you can see, it appears to be processing the function updateDetailsData before the fetch function finishes. I thought the then should make processing wait until the get is finished - the promise returned.

I need to do some processing in the updateDetailsData function based on the values in the $scope variables but when it gets there they are undefined.

Can someone help? I'm sure it is something little that I am missing, but I think I have tried just about all solutions provided on these forums and still end up with the same results.

Michel · Accepted Answer · 2015-10-07 14:25:31Z

2

The problem comes from: onaftersave="fetch(); updateDetailsData()". The update function executes as soon as fetch returns, not as soon as fetch is resolved.

Rework your function a bit:

function fetch () {
    return $http.get("api/checkSave/"+ JSON.stringify($scope.programDetails))
         .then(function(data) {
             // ...     
         });
}

$scope.fetchAndUpdate = function () {
    fetch().then(updateDetailsData);
}

In the template:

<form editable-form name="editableForm" onaftersave="fetchAndUpdate()">

answered Oct 7, 2015 at 14:25

Michel

28.6k6 gold badges67 silver badges72 bronze badges

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

3 Comments

user3861284 Over a year ago

I get an error trying this saying 'Cannot read property 'then' of undefined'...it does seem to process fetch and updateDetailsData (and in the proper order from what I can see). The error is on the fetch().then(updateDetailsData) line.

Michel Over a year ago

Did you add the return before the $http call?

user3861284 Over a year ago

I'm sorry, you are right, I didn't see that....yes that works and shows everything in right order and only once. Thanks!

Mathew Berg · Accepted Answer · 2015-10-07 14:27:12Z

1

You're using promises, so you have to wire into them, they aren't blocking:

<form editable-form name="editableForm" onaftersave="fetch().then(updateDetailsData)" >

Controller functions

$scope.fetch = function() {
    return $http.get("api/checkSave/"+ JSON.stringify($scope.programDetails))
         .then(function(data) {
              $scope.okToSave = data.data.save;
              $scope.missFields = data.data.fields;
              console.log($scope.okToSave); // line #194
              console.log($scope.missFields); // line #195
        });
}

$scope.updateDetailsData = function(){
    console.log($scope.okToSave); // line #202
}

answered Oct 7, 2015 at 14:27

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

1 Comment

user3861284 Over a year ago

this seems to work, but it looks like the functions are called twice. I guess not too much of an issue, since it appears as though the values are being populated correctly.

JoseM · Accepted Answer · 2015-10-07 14:29:28Z

0

Your fetch function is calling $http.get which makes an asynchronous call to your server. What that means is that the call will return right away, it won't block (i.e. stop the code from executing) while it waits for the server to respond. That is why you provide a callback using the .then function.

So taken the way you have currently written it, it is working as designed. If you want to have updateDetailsData function be executed after your then code then you have to either put it inside of the then or chain the functions together like Michael P. Bazos or Matthew Berg suggested.

answered Oct 7, 2015 at 14:29

JoseM

4,3022 gold badges26 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular processing not waiting on http.get .then

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related