Getting $http data from functions in AngularJS with $q.all()

Question

This should be easy but I cant seem to get it to work. I have the below code which are basically fetching data using $http.

FYI I'm using POST and not GET.

Right now they run in parallel. One might finish before the other. My goal is to present the data once all have finished. So I read up on $q but I cant seem to get it to work.

    $scope.getRestOpen = function () {
    $http({
        method: 'post',
        url: "http://www.xxx.co.uk/php/xxx/restopen-get.php",
        data: $.param({ 'location' : $scope.l, 
                       'time' : $scope.t,
                       'day' : $scope.d,
                       'type' : 'get_restopen' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.open = response.data.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.open = [];
    });
}

$scope.getRestClosed = function () {
    $http({
        method: 'post',
        url: "http://www.xxx.co.uk/php/xxx/restclosed-get.php",
        data: $.param({ 'location' : $scope.l, 
                       'time' : $scope.t,
                       'day' : $scope.d,
                       'type' : 'get_restclosed' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.closed = response.data.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.closed = [];
    });
}

As you can see I can get the returned data from my $http calls in the main function itself; $scope.closed = response.data.data; and $scope.open = response.data.data;

But I don't want to assign them to the $scope just yet until both have completed. So I should be able to use $q to do the below but I don't get data in my $scope and no errors.

$q.all([$scope.getRestOpen, $scope.getRestClosed]).then(function(data){
    $scope.open = data[0].data; // doesn't work
    $scope.closed = data[1].data // doesn't work
});

Am I doing something wrong?

No idea how to change all my code to work like that. There's nothing wrong with my 2 functions. Just need guidance on how to incorporate $q — moh_abk
– moh_abk, Commented Nov 28, 2015 at 19:45

tykowale · Accepted Answer · 2015-11-28 20:03:15Z

2

You need to have each item in your $q.all() array returning a promise. Because nothing is returned, your response is going to be [undefined, undefined].

All you need to do is replace $scope.open = response.data.data; with return response.data.data; and it should work. Make sure to do the same thing in the catch block.

EDIT: Here is how the code should look

$scope.getRestOpen = function () {
    return $http({
        method: 'post',
        url: "http://www.xxx.co.uk/php/xxx/restopen-get.php",
        data: $.param({ 'location' : $scope.l,
                'time' : $scope.t,
                'day' : $scope.d,
                'type' : 'get_restopen' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        return response.data.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        return [];
    });
}

$scope.getRestClosed = function () {
    return $http({
        method: 'post',
        url: "http://www.xxx.co.uk/php/xxx/restclosed-get.php",
        data: $.param({ 'location' : $scope.l,
                'time' : $scope.t,
                'day' : $scope.d,
                'type' : 'get_restclosed' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        return response.data.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        return [];
    });
}

edited Nov 28, 2015 at 20:03

answered Nov 28, 2015 at 19:41

tykowale

4493 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

moh_abk Over a year ago

Any chance you can modify my code to implement this

tykowale Over a year ago

@moh.ABK Edited my response to include how the code should look

Ashot · Accepted Answer · 2015-11-28 19:45:49Z

0

Modify your code like this

 $scope.getRestOpen = function () {
    return  $http({
       method: 'post',
       url: "http://www.xxx.co.uk/php/xxx/restopen-get.php",
       data: $.param({ 'location' : $scope.l, 
                   'time' : $scope.t,
                   'day' : $scope.d,
                   'type' : 'get_restopen' }),
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    });
 }

 $scope.getRestClosed = function () {
    return $http({
      method: 'post',
      url: "http://www.xxx.co.uk/php/xxx/restclosed-get.php",
      data: $.param({ 'location' : $scope.l, 
                   'time' : $scope.t,
                   'day' : $scope.d,
                   'type' : 'get_restclosed' }),
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  });
 }

 $q.all([$scope.getRestOpen(), $scope.getRestClosed()]).then(function(data){
   $scope.open = data[0].data; 
   $scope.closed = data[1].data;
 });

edited Nov 28, 2015 at 19:45

answered Nov 28, 2015 at 19:44

Ashot

1,3091 gold badge12 silver badges13 bronze badges

1 Comment

dfsq Over a year ago

Remember to call both functions: $scope.getRestOpen().

Emir Marques · Accepted Answer · 2015-11-28 19:53:57Z

Look this example and read comment in code:

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $q, $timeout) {
    
    var thenFn = function(value) {
        console.log('resolved ', value);
        return value;
    },
    
    q1 = $scope.q1 = $q.defer(),
    q2 = $scope.q2 = $q.defer(),
    p1 = $scope.q1.promise,
    p2 = $scope.q2.promise;
    
    //Wait complete all request 
    $q.all([
        p1.then(thenFn),
        p2.then(thenFn)
    ])
    .then(function(values) {
        $scope.fromThen = values;
    });
    
    // Must start the AngularJS digest process
    // to allow $q.resolve() to work properly
    // So use $timeOut() or $apply()
    
    setTimeout(function() {
        $scope.$apply(function() {
            console.log('resolving delayed promises');
            q1.resolve({
                value: 1
            });
            q2.resolve({
                value: 2
            });
        });
    }, 100, this);
    
    /* 
    *  Alternative approach
    *
    $timeout( function() {
    console.log('resolving delayed promises');
    q1.resolve({value : 1});
    q2.resolve({value : 2});        
});
*/
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
  {{fromThen}}
</div>

Collectives™ on Stack Overflow

Getting $http data from functions in AngularJS with $q.all()

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related