EDIT

The first answer is the elegant one, but, as stated a few times in this question and another questions on stackoverflow, the problem is that the service and the controller run their thing before the data actually arrives.

(Last comment on the first answer:)

Yes, the problem is that the API calls finish AFTER the service runs and returns everything to the controller, see here screencast/t/uRKMZ1IgGpb7 ... That's my BASE question, how could I wait on all the parts for the data to arrive?

It's like I'm saying it on repeat, how do we make a service that populates the array after the successful data retrieval, and the controller getting data after all this happens, because as you can see in my screenshot, things run in a different order.

I have this code:

 var deferred = $q.defer();
            $http.get('../wordpress/api/core/get_category_posts/?category_id=14 ').success(function(data) {
                //we're emptying the array on every call
                theData = [];
                catName = data.category.slug;
                theData = data;
                theData.name = catName;
                aggregatedData.push(theData);
            });
            $http.get('../wordpress/api/core/get_category_posts/?category_id=15 ').success(function(data) {
                theData = [];
                catName = data.category.slug;
                theData = data;
                theData.name = catName;
                aggregatedData.push(theData);
            });
            $http.get('../wordpress/api/core/get_category_posts/?category_id=16 ').success(function(data) {
                theData = [];
                catName = data.category.slug;
                theData = data;
                theData.name = catName;
                aggregatedData.push(theData);
            });
            $http.get('../wordpress/api/core/get_category_posts/?category_id=17 ').success(function(data) {
                theData = [];
                catName = data.category.slug;
                theData = data;
                theData.name = catName;
                aggregatedData.push(theData);
            });
            //deferred.resolve(aggregatedData);
            $timeout(function() {
                deferred.resolve(aggregatedData);
            }, 1000);
            /*//deferred.reject('There is a connection problem.');
            if (myservice._initialized) {
                $rootScope.$broadcast('postsList', deferred.promise);
            }*/
            //myservice._initialized = true;
            myservice = deferred.promise;
            return deferred.promise;

For the life of me I can't understand why do I have to put a timeout when passing the resulting array to defer ?

Shouldn't the principle be like, defer waits for the information to come and then returns the promise? What is the point of that 1 second there? From what I understand defer should be able to wait as long as needed for the API to return the result and the return the promised data.

I'm really confused, I've banged my head against the walls for the last two hours because I was not receiving any data in my controller, only when I put that timeout there.

EDIT

The first answer is the elegant one, but, as stated a few times in this question and another questions on stackoverflow, the problem is that the service and the controller run their thing before the data actually arrives.

(Last comment on the first answer:)

Yes, the problem is that the API calls finish AFTER the service runs and returns everything to the controller, see here screencast.com/t/uRKMZ1IgGpb7 ... That's my BASE question, how could I wait on all the parts for the data to arrive?

It's like I'm saying it on repeat, how do we make a service that populates the array after the successful data retrieval, and the controller getting data after all this happens, because as you can see in my screenshot, things run in a different order.

I have this code:

 var deferred = $q.defer();
            $http.get('../wordpress/api/core/get_category_posts/?category_id=14 ').success(function(data) {
                //we're emptying the array on every call
                theData = [];
                catName = data.category.slug;
                theData = data;
                theData.name = catName;
                aggregatedData.push(theData);
            });
            $http.get('../wordpress/api/core/get_category_posts/?category_id=15 ').success(function(data) {
                theData = [];
                catName = data.category.slug;
                theData = data;
                theData.name = catName;
                aggregatedData.push(theData);
            });
            $http.get('../wordpress/api/core/get_category_posts/?category_id=16 ').success(function(data) {
                theData = [];
                catName = data.category.slug;
                theData = data;
                theData.name = catName;
                aggregatedData.push(theData);
            });
            $http.get('../wordpress/api/core/get_category_posts/?category_id=17 ').success(function(data) {
                theData = [];
                catName = data.category.slug;
                theData = data;
                theData.name = catName;
                aggregatedData.push(theData);
            });
            //deferred.resolve(aggregatedData);
            $timeout(function() {
                deferred.resolve(aggregatedData);
            }, 1000);
            /*//deferred.reject('There is a connection problem.');
            if (myservice._initialized) {
                $rootScope.$broadcast('postsList', deferred.promise);
            }*/
            //myservice._initialized = true;
            myservice = deferred.promise;
            return deferred.promise;

For the life of me I can't understand why do I have to put a timeout when passing the resulting array to defer ?

Shouldn't the principle be like, defer waits for the information to come and then returns the promise? What is the point of that 1 second there? From what I understand defer should be able to wait as long as needed for the API to return the result and the return the promised data.

I'm really confused, I've banged my head against the walls for the last two hours because I was not receiving any data in my controller, only when I put that timeout there.

• javascript
• angularjs
• promise
• q

• Did you mean to put all $http.get return values into $q.all? – Steve Klösters Commented Sep 7, 2013 at 14:14
• I am throwing all the outputed arrays in the aggregatedData so I can pass that object to $q defer. I want to understand what's actually hapenning, here's a jsFiddle, jsfiddle.net/tjnWQ .... How does the promise work here. – Arthur Kovacs Commented Sep 7, 2013 at 14:20
• To be honest, I'm riddled with frustration. It's almost 6 weeks now I'm trying to get a handle on this Angular, I really like the idea, I understand bits and pieces, I have 3-4 mini apps working, but there are some gaping holes in my knowledge of this Angular framework that get in the way of making an actual usable product :). I gave in and spend a lot of money on this book packtpub.com/angularjs-web-application-development/book – Arthur Kovacs Commented Sep 7, 2013 at 14:45
• "The first answer is the elegant one, "...What was the question? – George Commented Mar 30, 2014 at 2:11
• Back then, I couldn't manage to grasp and use the concept of promises in Angular, and I found some misleading article on the internet where some guy actually used $timeout [somehow] with the concatenation of the return of multiple promises, long story short, it was a mess of ideas in my head, and @dluz in the answer below made everything clear. – Arthur Kovacs Commented Mar 30, 2014 at 7:48

2 Answers 2

IMHO I think there's a much clever (and elegant) way to do this with $q.all.

Please take a look at the code below.

I am assuming that you want to return the data at once with all the results aggregated on a big array.

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

myApp.factory('myService', function ($http, $q) {
    return {
        getAllData: function () {
            return $q.all([
                $http.get('../wordpress/api/core/get_category_posts/?category_id=14'),
                $http.get('../wordpress/api/core/get_category_posts/?category_id=15'),
                $http.get('../wordpress/api/core/get_category_posts/?category_id=16'),
                $http.get('../wordpress/api/core/get_category_posts/?category_id=17')
            ]).then(function (results) {
                var aggregatedData = [];
                angular.forEach(results, function (result) {
                    aggregatedData = aggregatedData.concat(result.data);
                });
                return aggregatedData;
            });
        }
    };
});

You can see above that the aggregatedData is only generated once all the async calls are completed via the $q.all.

You just need to include the service as dependency into one of your controllers, for example, and call the service like this myService.getAllData()

Let me know if you need a full working example and I can provide one! :)

The $http.get calls are async, but you aren't waiting until they are all completed before resolving the deferred. Here it works with the timeout simply because your are lucky that the calls have time to complete within 1 second, however this isin't reliable at all.

I will not reiterate a complete solution here, but have a look at my answer for another similar issue.