AngularJS $promise then() data undefined

Question

I am trying to get data assigned to a $scope variable. Inside my $promise.then() function it is displaying correctly but outside the function it shows as undefined. The following is my controller code:

angular.module('testSiteApp').controller('TestController', function ($scope, Tests) { 

$scope.test = Tests.get({id: 1});

$scope.test.$promise.then(function(data) {
    $scope.tasks = data.tasks;
    console.log($scope.tasks);
});

console.log($scope.tasks); 

});

The results inside the then() function:

[Object, Object, Object, Object]

The results outside the then() function:

undefined

The 'Tests' service factory I am using is the following:

angular.module('testSiteApp').factory('Tests', function($resource) {

return $resource('/api/test/:id', {id: '@id'}, { 'update': { method: 'PUT' } } );

});

Even when I use the query method instead of the get for my resource and set isArray to true I still end up with the same issue. For some reason the data is not binding to my scope inside the then function.

I am sorry if this is a repeat question but i looked everywhere and only found undefined issue relating to the $promise function which is no the issue in this case.

Thanks in advance for the support.

Pastorship

Answer 1

The function passed to .then() will be called after the data has been fetched from the backend. The other console.log() (the one outside of .then()) will be called immediately after the request has been made, and not after it has been completed, thus the tasks is undefined.

Consider the timing (of course times are only an example):

// time = 0.000 sec. You make a request to the backend
$scope.test = Tests.get({id: 1});

$scope.test.$promise.then(function(data) {
    // time = 1.000 sec. Request is completed. 
    // data is available, so you assign it to $scope.tasks
    $scope.tasks = data.tasks;
    console.log($scope.tasks);
});

// time = 0.000 sec (!!!) This has been called NOT AFTER
// the callback, but rather immediately after the Tests.get()
// So the data is not available here yet.
console.log($scope.tasks); 

Svelte

Answer 2

It's a promise so it sets $scope.task after it returns. Until that return occurs $scope.task is undefined, which is what your second console.log is showing . At some later time the promise is resolved (completes) and $scope.task has a value, which is what your first console.log shows.

Mariettemarigold

I understand the problem, but how do you make the scope wait? or is this just bad code? – Buckner

Answer 3

$scope.test.$promise.then(function(data) {

if(data){    
$scope.tasks = data.tasks;
}

console.log($scope.tasks);
});

try this

Soph

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Scalpel

Answer 4

This code will help you to fetch data and resolve with promise, please note fetch data will only work after then call...

getData(){
      const promise = this.httpClient.get(this.PHP_API_SERVER+'/api/books').toPromise();  
      promise.then((data)=>{
        console.log("Resolved: " + JSON.stringify(data));
        return JSON.stringify(data);
      }, (error)=>{
        console.log("Rejected " + JSON.stringify(error));
      })
    }

Lucie