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.

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.

• javascript
• angularjs

Share Improve this question Follow edited Oct 4, 2015 at 17:02 Viktor Bahtev 4,90822 gold badges3535 silver badges4141 bronze badges asked Oct 4, 2015 at 16:41 Ayeye BrazoAyeye Brazo 3,48699 gold badges4040 silver badges7575 bronze badges 8

• seems like you need another resource method and api endpoint that includes a page param in url – 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 Commented Oct 4, 2015 at 17:39
• well if query() only returns 20 you need another method that sets the start point – charlietfl Commented Oct 4, 2015 at 17:43
• I don't understand what do you mean... sorry. – Ayeye Brazo Commented Oct 4, 2015 at 17:56
• how does api know what to deliver if you don't set start point? – charlietfl Commented Oct 4, 2015 at 18:09

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 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.