I am working on an AJAX Angular application that displays paginated lists of photos. Most of it works well, but I am faced with this one problem which I had never met before: once loaded, some of the data from the server disappears in the process of the $http call. After analysis, I believe something went wrong in the response transformation (see below).
In this case, the controller calls for a JSON object containing a list of ids (sorted by date) and the total number of photos in base. This call is made every time the user changes page.
On the first time (i.e., on page load), it works fine, but it goes wrong once the page changes. It does load data from the server, and returns said object: this object does give me the total - but provides an empty array instead of the required list of ids.
// The first call returns a valid data object like this one (example for 10 ids per page):
// { "mostRecent" : [ 156, 161, 169, 178, 179, 181, 182, 183, 192, 203 ], "total" : 1653 }
// The second time returns a similar object but with an empty array of size 10, as follows:
// { "mostRecent" : [], "total" : 1653 }
This controller function makes a call to a Photo service that communicates with my server.
app.controller( 'PhotoManagerController', [ '$scope', '$q', 'Photo', function ( $scope, $q, Photo ) {
/**
* Returns a serie of ids for the page.
* @param params Parameters for the AJAX call (pagination, etc...)
* @param init whether it is the first time the function is called or not.
* @return a promise returning the ids.
*/
var retrieveIds = function ( params, init ) {
return Photo.getIds( params.pagination )
.then( function ( response ) {
// At this point, the data is valid the first time and incomplete the second time.
if ( init ) { total = response.data.total; }
var loadedIds = response.data.mostRecent;
return $q( function ( resolve ) { resolve( loadedIds ); } );
} );
};
} );
The Photo Service:
app.factory( 'Photo', [ '$http', '$q', 'SERVER_ROUTES', function ( $http, $q, SERVER_ROUTES ) {
return {
getIds : function ( pagination ) {
var params = {};
if ( pagination ) {
params.params = { 'c' : pagination.c, 'p' : pagination.p };
}
return $http.get( url + SERVER_ROUTES.PHOTO.GET_IDS, params );
}
};
} );
I have checked all sorts of things:
- The server does return the data when Photo.getIds() is called.
- I wondered if something was wrong with the order of my async calls, but I could not find anything of the sort after having inserted breakpoints to check the process.
After analysis, I would think the problem comes from the transformResponse object of the $http. I changed the query to use $http({}) with a transformResponse parameter, and saw in this function that the response to the second call DID contain, at first, the expected object with a full array of ids.
I do not know what the origin of the problem is, mostly considering that it worked well the first time. I guess it is caused by one of $http's default transformResponse function, but which one?
