How to handle Content-Range for pagination on Restangular? - angularjs

Question

The API i am using returns header "Content-range" for lists :
Request : GET /users
Response contains : Content-Range: 0-49/1337
What is the correct way to generalize the retrieval (and parsing) of this header value with Restangular ?
Do i have to make my own function ?
Is there a existing method that can "catch" every response, check if the header is there and then append the parsed values (i.e : limit, range, total_count, page number) to Restangular returned object ?

Answer 1

Restangular has addresponseinterceptor for catching responses. You can catch your response there and get response.headers.
You should return a restangularized element in the interceptor otherwise you cannot get any data in your controllers or services...
So an example can be like this...
RestangularProvider.addResponseInterceptor(function (data, operation, what, url, response, deferred) {
var data = response.data;
var contentRange = response.headers("Content-Range");
if (contentRange) {
data.limit = contentRange.limit;
}
return data;
});
As you see you can add Restangular response interceptor on any angular config blog by injection RestangularProvider

Answer 2

After a few iterations on #wickY26 solution here is a technique that worked well for me :
Prerequisite
As mentioned in the question the API response contains this header :
Content-Range: 0-9/150
Which mean : The returned list will start at the 1st element (starting at 0) until the 9th on a total of 150.
On the other side the request has to include a "range=x-y" :
https://api.myapp.com/contents/?range=10-20
Code below will only work inside those contraints.
First step
Make Restangular grab all incoming responses from API. If we have a "Content-Range" header then append a pagination object with all important informations regarding pagination (from, to, total, numPage, currentPage) :
angular.module('myapp')
.config(dataConfigResponse);
dataConfigResponse.$inject = ['RestangularProvider'];
function dataConfigResponse(RestangularProvider) {
RestangularProvider.addResponseInterceptor(function (data, operation, what, url, response, deferred) {
var responseData = response.data;
var contentRange = response.headers('Content-Range');
if (contentRange) {
var rangeFields = contentRange.split(/\s|-|\//);
var paginationFrom = parseInt(rangeFields[0]) + 1;
var paginationTo = parseInt(rangeFields[1]) + 1;
var paginationTotal = parseInt(rangeFields[2]);
var paginationSubTotal = parseInt(paginationTo - paginationFrom);
responseData.pagination = {
from: paginationFrom,
to: paginationTo,
total: paginationTotal,
numPages: Math.ceil(paginationTotal / paginationSubTotal),
currentPage: Math.ceil(paginationFrom / paginationSubTotal)
};
}
return responseData;
});
}
Second step
Make Restangular intercept all outgoing requests to the API. When the action is a getList we append "?range=10-20" to the next query
angular.module('myapp')
.config(dataConfigRequest);
dataConfigRequest.$inject = ['RestangularProvider'];
function dataConfigRequest(RestangularProvider) {
RestangularProvider.addFullRequestInterceptor(function (element, operation, what, url, headers, params, httpConfig) {
if (operation === 'getList') {
if (Object.keys(params).length) {
params.range = ((params._page - 1) * params._perPage) + '-' + (params._page * params._perPage - 1);
delete params._page;
delete params._perPage;
}
}
});
}
Third step
Now the controller which is displaying the list.
function dashboardContentListCtrl($scope, dataService) {
// Pagination starting values
$scope.maxSize = 6;
$scope.currentPage = 1;
$scope.limit = 20;
$scope.pageChanged = function () {
$scope.params = {_page: $scope.currentPage, _perPage: $scope.limit};
dataService.getAllContents($scope.params).then(function (contents) {
$scope.pagination = contents.pagination;
$scope.contents = contents.plain();
}).catch(function () {
$scope.contents = [];
});
};
$scope.pageChanged();
On my app the pagination view component is angular-ui pagination directive, looking like this :
<pagination class="pagination-sm"
boundary-links="true"
ng-hide="pagination.total < limit"
total-items="pagination.total"
items-per-page="limit"
ng-model="currentPage"
max-size="maxSize"
rotate="false"
ng-change="pageChanged()"></pagination>