Angular Ajax, undefined variable outside the function

Question

im building a ticket admin table, and i have some issues trying to export a varaible outsite the ajax function.

Here is 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

Thanks for the help! =)

Answer 1

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!

Angular Ajax, undefined variable outside the function

Sign up