Angular Ajax, undefined variable outside the function

Question

I'm building a ticket admin table, and I have some issues trying to export a variable outside the ajax function.

My code:

app.controller('bodyController',function($scope,$http,$sce){
$scope.ticketList = [];
$http.get("tickets.php")
.then(function(response) {
   $scope.ticketModify = response.data;
    console.log($scope.ticketModify); //this one return the correct data.
    return $scope.ticketModify;
});
console.log($scope.ticketModify); //this return undefine

Same result with factory if I try to return the response.data into any variable

All the logic of what to do should be in the promise callback. — reptilicus, Oct 14 '16 at 20:41
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) — Heretic Monkey, Oct 14 '16 at 21:21
The code make GET then continue with console.log because the function is asyncronous so it's executed and then the code can continue. When GET return the code start inside the then part and never exit outside. So the console.log never happen again. There already good answer. — jedi, Oct 14 '16 at 21:23

score 1 · Accepted Answer · answered Oct 14 '16 at 20:53

Just because code comes physically above other code doesn't mean that it gets executed from top to bottom. Think about your program like this:

app.controller('bodyController',function($scope,$http,$sce){
$scope.ticketList = [];
$http.get("tickets.php")
   .then(handleResponse);
console.log($scope.ticketModify); //this return undefine

function handleResponse(response) {
    $scope.ticketModify = response.data;
    console.log($scope.ticketModify); //this one return the correct data.
    return $scope.ticketModify;
}

Do you see now why $scope.ticketModify is still undefined? The position of the code does not matter, what matters is the time at which it is executed. You should chain another then on to the then you have there if you want to do more with the newly modified $scope.ticketModify. Or, call another function and pass $scope.ticketModify from your current then. You can do anything!

score 0 · Answer 2 · answered Oct 14 '16 at 20:42

What executes in the .then is executed when the server responded. But just after the ´$http.get´Promise, the next code will be executed.

You should look into async programming and Promises. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise

score 0 · Answer 3 · answered Oct 14 '16 at 21:14

app.controller('bodyController', function($scope, $http, $sce) {
      $scope.ticketList = [];
      $scope.ticketModify = "";
      $http.get("tickets.php")
        .then(function(response) {
          $scope.ticketModify = response.data;
          console.log($scope.ticketModify);
          return $scope.ticketModify;
        });
      console.log($scope.ticketModify);
      // This  should print a empty String
    }

the place where it is working alright for you, is after the call to tickets.php is returned.

The place where it is not working is due to the fact that the ticketModify is not defined by the time you are accessing. You called the tickets.php as an async call and immediately trying to access the variable which is being populated after the promise is resolved.

So, all you could do is to declare ticketModify on scope before the http call to tickets.php and update the value on success / then callback on tickets.php

Angular Ajax, undefined variable outside the function

3 Answers3