CODEWITHSUNDEEP
javascriptphpangularjsget
user3861284
user3861284

Reputation: 249

Angular processing not waiting on http.get .then

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.

Upvotes: 0

Views: 107

Answers (3)

JoseM
JoseM

Reputation: 4302

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.

Upvotes: 0

Mathew Berg
Mathew Berg

Reputation: 28750

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
}

Upvotes: 1

Michel
Michel

Reputation: 28289

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()">

Upvotes: 2

Related Questions