Angular Asynchronous Function Return Value To Variable

Question

I know questions like this have been asked before with Angular, unfortunately I can't get any of those solutions to work with my specific implementation so I am asking here.

I have a function scope.getOrders() here:

    $scope.lastOrderFetch,$scope.orders;
    $scope.getOrders = function(){

if(moment().diff(moment($scope.lastOrderFetch))>5000||$scope.lastOrderFetch==null){
                 $http({
            method: 'GET',
            url: 'http://www.example.com/getOrders',
        }).then(function successCallback(html) {
            $scope.orders = html.data;
            $scope.lastOrderFetch = new Date();
            return html.data;
        });
            }
            else{
                return $scope.orders;
            }
        };

I simply want the orders from the backend to popuplate a variable here:

var orders = $scope.getOrders();

Which is in another function. I gather my problem is orders is always undefined because it is trying to assign to it while $http is still working it's magic, and it is async so the $http data is not available right away.

I also gather I am supposed to use a service and then a promise or something, but my issue is that the $http should only fire based on a conditional in the controller. Also a lot of solutions mix callbacks and promises so I'm not sure what to do here. Also, doesn't $http itself return a promise? I'm not sure I need a service which is why I'm posting here to see how I would do this.

Any help would be appreciated.

you're trying to use return keyword outside function. – Todd Jul 18 '16 at 16:27 — Todd, Jul 18 '16 at 16:27
oh, unless you just missed it when copy/pasting – Todd Jul 18 '16 at 16:28 — Todd, Jul 18 '16 at 16:28
I think I am returning inside the function... – Summer Developer Jul 18 '16 at 16:29 — Summer Developer, Jul 18 '16 at 16:29

Joey Etamity · Answer 1 · 2016-07-18T16:40:04.877

I think you have problem with the workflow controlling, try to use callback function way:

$scope.getOrders = function(callback){
 if(moment().diff(moment($scope.lastOrderFetch))>5000||$scope.lastOrderFetch==null){
             $http({
        method: 'GET',
        url: 'http://www.example.com/getOrders',
    }).then(function successCallback(html) {
        $scope.orders = html.data;
        $scope.lastOrderFetch = new Date();
        return html.data;
    });
        }
        else{
            return callback($scope.orders);
        }
    }; 

$scope.getOrders(function dataReady(data){
   var orders = = data; // data === $scope.orders

  // do your logic here
});

score 1 · Answer 2 · answered Jul 18 '16 at 16:34

This might help you too (using promise):

$scope.getOrders = function(){

   var deferred = $q.defer(); 
   if(moment().diff(moment($scope.lastOrderFetch))>5000||$scope.lastOrderFetch==null){
        $http({
            method: 'GET',
            url: 'http://www.example.com/getOrders',
        }).then(function successCallback(response) {
            $scope.orders = response.data;
            $scope.lastOrderFetch = new Date();
            deffered.resolve(response.data);
    });

    } else {
        deferred.resolve($scope.orders);
    }
    return deferred.promise;
};

and call it like:

$scope.getOrders().then(function(response){
     // code after you get the response
});

Angular Asynchronous Function Return Value To Variable

2 Answers2