Angular $resource recursive query

Question

From the API I'm working on I need to take 2 different lists and I need to take in chunks of 20 items to avoid server timeouts.

What I built actually is this:

Items1.query().$promise
.then(function (data) {
  $scope.items1 = data.list;
  return Items2.query().$promise;
})
.then(function (data) {
  $scope.items2 = data.list;
});

With this code I'm downloading the entire list of objects.

Both the query return:

{
    list: [...],
    next: true,
    limit: 20,
    last: 20
}

Basically it is a pagination system.

Both services are like this:

App.factory('Items1', ['$resource',
    function($resource) {
        return $resource('items1/:item1Id', { storeId: '@id'
        }, {
            query: {
                method: 'GET',
                isArray: false
            },
            update: {
                method: 'PUT'
            }
        });
    }
]);

I don't really know how to make recursive function with $resource in order to push those items in chunks of 20.

Answer 1

I wrote an example jsfiddle to show recursive promises. Converting it for your example, it would looks something like:

function getList(resource, list, last) {
    return resource.query({last: last}).$promise.then(function(data){
        list = list.concat(data.list);
        if (data.next) {
            return getList(resource, list, data.last);
        }
        return list;
    });
}

getList(Items1, [], 0).$promise.then(function(list) {
    $scope.items1 = list;
});
getList(Items2, [], 0).$promise.then(function(list) {
    $scope.items2 = list;
});

You would need to modify your angular resources to allow you to pass the last parameter in the API call. I'm assuming that the API, if provided with that parameter, will return the next section starting from it.