Question

I am using a web api that provides results with paging built for me and I can get the first page of results via the $resource service in a controller as soon as the page loads. That’s working as expected.

How do I page to the next set of results while using the URL in the response meta and hook it into the Twitter Bootstrap paging control?

Here’s an idea of the response JSON I get:

{
    "results": [
               { "some-data" },
               { "some-data" }
            ],
    "meta": {
              "totalRecords": 33,
              "pageSize":     10,
              "nextSet":      "http://api.domain.com/?action=whatever&pageSize=10&offset=10"
          }
}

I’ve tried to set the next paging control to the URL in the meta while in my callback and for some reason my controller executes the first request to get the data and then tries to execute the request for the next set and it doesn’t work.

Answer 1

Something like the following should work.

var WebApi = $resource('http://api.domain.com/');
$scope.action   = 'initial action for first page goes here';
$scope.pageSize = 10;
$scope.offset   = 0;
$scope.loadPage = function() {
    var serverData = WebApi.get( 
        {action: $scope.action, pageSize: $scope.pageSize, offset: $scope.offset}, 
        // calls http://api.domain.com/?action=<action>&pageSize=<pageSize>&offset=<offset>
        function() {
            // page data is in serverData.results
            $scope.model = serverData.results;
            // update $scope properties for next page: action, pageSize, offset
            $scope.action = ...
            ...
        }
    )
}