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.

seems like you need another resource method and api endpoint that includes a page param in url — charlietfl
– charlietfl, Commented Oct 4, 2015 at 17:31
I have everything to do the pagination and it works fine, I just need to cycle the query for each item unless the next value is false — Ayeye Brazo
– Ayeye Brazo, Commented Oct 4, 2015 at 17:39
well if query() only returns 20 you need another method that sets the start point — charlietfl
– charlietfl, Commented Oct 4, 2015 at 17:43
how does api know what to deliver if you don't set start point? — charlietfl
– charlietfl, Commented Oct 4, 2015 at 18:09

James Brierley · Accepted Answer · 2017-12-04 16:20:18Z

12

+50

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.

edited Dec 4, 2017 at 16:20

answered Oct 7, 2015 at 15:17

James Brierley

4,6801 gold badge22 silver badges41 bronze badges

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

1 Comment

Ayeye Brazo Over a year ago

Awesome, it works fine and I've understand how to do that properly. Thanks for your help.

Collectives™ on Stack Overflow

Angular $resource recursive query

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related