0

I changed the scope variable in an if statement and outside the if statement it turned into an undefined variable

app.controller("Login", function($scope, $window,$http){
    var status;
    $scope.loginUser = function(logData){
        $http.post('/corporate/login',logData).then(function(response){
              var data = response.data
              var status = data.success;
              if(status == true){
                $scope.logStatus = true;
                console.log($scope.logStatus); // prints true
              }else{
                $scope.logStatus = false;
              }
        })

        console.log($scope.logStatus); //prints undefined
    }
});
georgeawg
  • 46,994
  • 13
  • 63
  • 85
Mahmoud Youssef
  • 85
  • 2
  • 11
  • Note: The $http `.success` method is [deprecated and removed from AngularJs 1.6](http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6/35331339?s=5|1.9570#35331339). Instead, use the standard promise `.then` and `.catch` methods. – georgeawg Apr 16 '17 at 19:35
  • Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Jared Smith Apr 16 '17 at 19:42

2 Answers2

1

outside ... it turned into an undefined variable

It did not "turn into" an undefined value. The last console.log in the code executes before the console.log in the success handler. It is undefined because it has not yet been set by the success handler.

Expaination of Promise-Based Asynchronous Operations

console.log("Part1");
console.log("Part2");
var promise = $http.get(url);
promise.then(function successHandler(response){
    console.log("Part3");
});
console.log("Part4");

pic

The console log for "Part4" doesn't have to wait for the data to come back from the server. It executes immediately after the XHR starts. The console log for "Part3" is inside a success handler function that is held by the $q service and invoked after data has arrived from the server and the XHR completes.

For more information, see How to use $http promise response outside success handler.

Demo

console.log("Part 1");
console.log("Part 2");
var promise = new Promise(r=>r());
promise.then(function() {
    console.log("Part 3");
});
console.log("Part *4*");
Community
  • 1
  • 1
georgeawg
  • 46,994
  • 13
  • 63
  • 85
  • Does this mean that if I define a variable inside the "then()" block, I am only able to reference that variable from within that block as well? For instance, will this work?: `var promise = $http.get(url); promise.then(function successHandler(response){ $scope.x = yz; }); console.log($scope.x)` – fireinspace Jul 13 '17 at 19:40
0

$http is asynchronous. Your if/else conditions are in the success callback. Problem is that the console.log($scope.logStatus); line is called before the success callback gets called

You should probably initialise $scope.logStatus = false before the $http call.

EDIT:

If like you said, $scope.logStatus remains false, then check if your if block is being called. See fiddle:

https://jsfiddle.net/51bsbzL0/253/

Ladmerc
  • 988
  • 8
  • 17
  • that way it will remain false although the if statement changed it to true – Mahmoud Youssef Apr 16 '17 at 12:42
  • Just write `$scope.logStatus = false` before the `$http` call, your logic will work fine! – Aayushi Jain Apr 16 '17 at 12:49
  • I just did and it remained false – Mahmoud Youssef Apr 16 '17 at 12:49
  • I'm sure the if is the one executed not the else. The asynchronous callback does not update the scope variable I'm sure that's what's going on but I can't find a solution – Mahmoud Youssef Apr 16 '17 at 13:13
  • Did you see the fiddle I posted? it certainly updates the logStatus. Do you get the console.log in the if block? Only thing different from your code and that in the fiddle is the endpoint. Confirm if some other code isn't overwriting logStatus – Ladmerc Apr 16 '17 at 13:17
  • nothing is overriding the logStatus at all, I see that your fiddle works but what I noticed is that you can't override the logStatus after the callback – Mahmoud Youssef Apr 16 '17 at 13:53
  • @MahmoudYoussef: You DO realize that everything inside `$http.post` will happen AFTER, the `$scope.loginUser` function have returned? Therefore the last `console.log` outside the `.post()` will print first. – slebetman Apr 16 '17 at 13:55
  • I also found out that it works on the html but doesn't work in the console.log – Mahmoud Youssef Apr 16 '17 at 13:57