How to add pagination in Restangular and Django Rest Framework? - angularjs

In DRF I have added pagination limit to 100 'PAGINATE_BY': 100,
since Restangular expects results in array form, I had to use the below meta extractor function in my angular app module
var app = angular.module("myapp", ["restangular"].config(function(
RestangularProvider){
RestangularProvider.setResponseExtractor(function(response, operation, what, url) {
if (operation === "getList") {
var newResponse = response.results;
newResponse._resultmeta = {
"count": response.count,
"next": response.next,
"previous": response.previous
};
return newResponse;
}
return response;
});
});
and my controller looks like
app.controller('DataCtrl',function($scope, Restangular){
var resource = Restangular.all('myapp/api/dataendpoint/');
resource.getList().then(function(data){
$scope.records = data;
});
}
Meta info is not available in controller, how do I paginate if there are more than 100 records available?

I suppose you could simply call:
RestangularProvider.addResponseExtractor(function(data, operation, what, url, response) {
if (operation === "getList") {
data._resultmeta = {
"count": response.count,
"next": response.next,
"previous": response.previous
};
return data;
}
return response;
});
and
var page = 2;
var resource = Restangular.all('myapp/api/dataendpoint/');
resource.getList({page: page}).then(function(data){
console.log(data._resultmeta.next ? 'there is more pages' : 'You reach the end');
});
I'm not usual with Rectangular but Django Rest Framework support pagination from query parameter

Related

Angular Datatables Server Side Search Request is Returning Empty Object

Problem
I'm using server side pagination and search, pagination is working fine but when i enter some text into search box which automatically sends request to server, it immediately returns back with empty object but its also bringing "recordsTotal" for pagination to work. which means one query is executing but the second one is NOT.
API Test using postman
I've tested the API USING POSTMAN and what ever search string i send, it brings me back the appropriate results but when i send it via search box (FROM FRONT END) it just simply won't work
Here is my Controller Code:
I've intentionally commented "fnCallback(records)" but I'm consoling "console.log(result)" the result array returned from back-end API
angular.module('withServerSide', ['datatables'])
.controller('withServerSideController', function WithPromiseController($scope, DTOptionsBuilder, DTColumnBuilder, filterService)
{
$scope.dtColumns = [
DTColumnBuilder.newColumn('es_officer_id', 'Id').withOption('searchable', true),
DTColumnBuilder.newColumn('es_officer_name', 'Name').withOption('searchable', true)
];
$scope.dtOptions = DTOptionsBuilder
.newOptions()
.withFnServerData(serverData)
.withDataProp('data') // tried data aswell
.withOption('processing', true)
.withOption('serverSide', true)
.withOption('paging', true)
.withOption('stateSave', true)
.withOption('lengthMenu', [5, 10, 20, 30, 50, 100 ])
.withDisplayLength(5)
.withPaginationType('full_numbers')
.withButtons([
'colvis',
'print',
'excel'
])
function serverData(sSource, aoData, fnCallback, oSettings)
{
//All the parameters you need is in the aoData variable
var draw = aoData[0].value;
var limit = aoData[4].value; // item per page
var order = aoData[2].value[0].dir; // order by asc or desc
var start = aoData[3].value; // start from
var search = aoData[5].value; // search string
//Then just call your service to get the records from server side
filterService.execute(start, limit, order, search).then(function(result)
{
console.log(result);
// var records = {
// 'draw': draw,
// 'recordsTotal': result.data.recordsTotal,
// 'recordsFiltered': result.data.recordsFiltered,
// 'data': result.data.es_officers
// };
// // console.log(records);
// fnCallback(records);
});
}
});
Here is Code for filterService factory:
angular.module('Main_Module').factory('filterService', filterService);
filterService.$inject = ['$q', '$http']
function filterService($q, $http)
{
var service = {
execute: execute
};
return service;
// Start-From LIMIT ASC | DESC
function execute(start, limit, order, search)
{
// console.log(start, length, order);
var defered = $q.defer();
//Make a request to backend api and then call defered.resolve(result);
// /SELECTSpecific/:TableName/:Start/:Length/:Order
$http({
url : 'http://localhost:3000/api/SELECTQPromise/es_officers/'+start+'/'+limit+'/'+order+'/'+search,
method: 'POST'
})
.then(function(result)
{
defered.resolve(result);
})
.catch(function(err)
{
defered.reject(err);
});
return defered.promise;
}
};
Back-end Code:
router.post('/SELECTQPromise/:TableName/:start/:limit/:order/:search', function(req, res)
{
function doQuery1()
{
var query1 = "SELECT COUNT(*) AS recordsTotal FROM " + req.params.TableName;
var defered = Q.defer();
connection.query(query1, function(err, result) //defered.makeNodeResolver()
{
if(err)
{
defered.reject(err);
}
else
{
defered.resolve(result[0]);
}
});
return defered.promise;
}
function doQuery3()
{
var query3 = "SELECT es_officer_id, es_officer_name FROM "+req.params.TableName+
" WHERE es_officer_name LIKE '%"+req.params.search+"%'"+
" ORDER BY es_officer_id "+req.params.order;//+" LIMIT "+req.params.start+", "+req.params.limit;
var defered = Q.defer();
connection.query(query3, function(err, result) //defered.makeNodeResolver());
{
if(err)
{
defered.reject(err);
}
else
{
defered.resolve(result);
}
});
return defered.promise;
}
Q.all([doQuery1(), doQuery3()]).then(function(result)
{
// res.json({"Error" : false, "Message" : "success", [req.params.TableName] : result[1], "recordsTotal": result[0].recordsTotal, "recordsFiltered": result[0].recordsTotal});
res.send(result);
})
.catch(function(err)
{
res.send(err);
});
});
I've figured out the problem and I'm mentioned it here in case if anyone face the same problem in the future.
on this line I thought I'm assigning value to search where as in actual .value itself.
var search = aoData[5].value;
the search string is with the .value object, the correct would be
var search = aoData[5].value.value;
Now its working absolutely fine.

compare to object angular js

i have a problem with AngularJS I receive from api json that json contains a prod url and url prerpod I would make calls to these APIs to retrieve a new one json then compare the results to validate which are the same as the problem is that I have a 200 aPI test how can I do. Thank you in advance
ps I think the test objects with the method equals.
i have 100 object like this:
{
"ID": "1",
"URL_preprod": "url1",
"Preprod_bis": "url2",
"prod": "url3",
}
i need to check if the result of call is equals for each object.
function callAtTimeout() {
if ($scope.preprod && $scope.preprodBis) {
angular.equals($scope.preprod,$scope.preprodBis);
$scope.msg = "equals";
}}
$scope.test = function() {
if (tnrArray) {
for (var i = 0; i < tnrArray.length; i++) {
var urlPreprod = tnrArray[i].URL_preprod;
console.log(urlPreprod);
$http.get(urlPreprod).success( function(response) {
$scope.preprod = response;
console.log(response);
});
var urlPreprodBis = tnrArray[i].Preprod_bis;
console.log(urlPreprodBis);
$http.get(urlPreprodBis).success( function(response) {
$scope.preprodBis = response;
console.log(response);
});
$timeout(callAtTimeout, 3000);
}
var response1;
$http.get("/your/url").then(function(response) {
response1 = response;
return $http.get(response.prodUrl);
}).then(function(prodResponse) {
console.log(prodResponse);
console.log(_.isEqual(response1 , prodResponse)); // uses lodash
}).catch(function(badResponse) {
console.log("oops something went wrong", badResponse);
})
this should work - lodash is used to check for equality
TO DO THIS FOR 200 URLs ASYNCHRONOUSLY ...
var urlList = ['/path/url1','/path/url2','/path/url3'];
angular.forEach(urlList, function(url) {
var response1;
$http.get(url).then(function(response) {
response1 = response;
return $http.get(response.prodUrl);
}).then(function(prodResponse) {
console.log(prodResponse);
console.log(angular.equals(response1 , prodResponse));
}).catch(function(badResponse) {
console.log("oops something went wrong", badResponse);
})
});

Second jsonp http get request - using $q gives 404 error despite GET showing 200

I've found a couple of similar posts to this, but the answers (which boil down to putting callback=JSONP_CALLBACK into the get request) aren't working for me. Using that in the request generates an immediate 404 error, while using callback=angular.callbacks._0 at least lets the first request return a successful response. The problem is that using the very same request function with the very same params a second time to refresh the data or get the next 20 objects, returns a 404 error even though the actual get returns a 200 and the data can be seen in chrome tools.
I'm, new to using $q deferred promises, so I'm hoping that the issue has something to do with that not allowing enough time for a response before executing the reject. I'm attaching the code, which involves the Yelp API as did the other couple of posts I found on this issue. The most closely related is: (Subsequent JSONP requests give status 404 despite GET status 200), but there's another which uses the same callback string I'm using (Yelp API and AngularJS).
This particular project is for an ionic mobile app that gets coffee shops based on users geolocation.
Here's the code for the service (secret stuff removed):
var app = angular.module('caffeine.services', []);
app.service("YelpService", function ($q, $http, $cordovaGeolocation, $ionicPopup) {
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
return result;
};
var method = 'GET';
var url = 'http://api.yelp.com/v2/search';
var consumerSecret = ''; //Consumer Secret
var tokenSecret = ''; //Token Secret
var self = {
'page': 1,
'isLoading': false,
'hasMore': true,
'results': [],
'ranStr': randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
'timeStamp':new Date().getTime(),
'lat': 51.544440,
'lon': -0.022974,
'term': 'coffee',
'oauthConKey': '', //Consumer Key
'oauthToken': '', //Token
'oauthSigMeth': 'HMAC-SHA1',
'refresh': function () {
self.page = 1;
self.isLoading = false;
self.hasMore = true;
self.results = [];
return self.load();
},
'next': function () {
self.page += 1;
return self.load();
},
'load': function () {
self.isLoading = true;
var deferred = $q.defer();
ionic.Platform.ready(function() {
$cordovaGeolocation
.getCurrentPosition({timeout:10000, enableHighAccuracy:false})
.then(function(position){
self.lat = position.coords.latitude;
self.lon = position.coords.longitude;
console.log('latlong = '+self.lat+','+self.lon);
var params = {
callback: 'angular.callbacks._0',
page: self.page,
ll: self.lat+','+self.lon,
term: self.term,
oauth_consumer_key: self.oauthConKey, //Consumer Key
oauth_token: self.oauthToken, //Token
oauth_signature_method: self.oauthSigMeth,
oauth_timestamp: self.timeStamp,
//new Date().getTime(),
oauth_nonce: self.ranStr
};
var signature = oauthSignature.generate(method, url, params, consumerSecret, tokenSecret, { encodeSignature: false});
params['oauth_signature'] = signature;
console.log('url ='+url);
console.log('params.ll = '+params.ll);
$http.jsonp(url, {params: params}).success(function (callback) {
self.isLoading = false;
console.log(callback.businesses);
if (callback.businesses.length == 0) {
self.hasMore = false;
} else {
angular.forEach(callback.businesses, function (business) {
self.results.push(business);
});
}
self.isLoading = false;
deferred.resolve(callback.businesses);
})
.error( function (callback, status, headers, config) {
self.isLoading = false;
console.error('data not received');
console.error('data: '+callback);
console.error('status: '+status);
console.error('headers: '+headers);
console.error('congig: '+config);
deferred.reject(callback);
});
}, function(err) {
console.error('Error getting position');
console.error(err);
$ionicPopup.alert({
'title': 'Please turn on geolocation',
'template': 'It looks like you have geolocation turned off. Please turn on geolocation in your app settings to use this app.'
});
})
});
return deferred.promise;
}
};
self.load();
return self;
});

Downloading data to Angular from Another URL

I am new to Angular and need to download data into a service. It works fine with local json file; however, obviously you want to get the data from another URL which then gives the issue of cross domain download. Is there a way to go around this? I need to download the data from here http://files.parsetfss.com/c2e487f5-5d96-43ce-a423-3cf3f63d9c5e/tfss-31564b7d-6386-4e86-97c5-cca3ffe988f3-phones.json rather than 'phones/phones.json' below.
'use strict';
/* Services */
function makeArray(Type) {
return function(response) {
var list = [];
angular.forEach(response.data, function(data) {
list.push(new Type(data));
});
return list;
}
}
function instantiate(Type) {
return function(response) {
return new Type(response.data);
}
}
angular.module('phonecatServices', []).
factory('Phone', function($http){
var Phone = function(data){
angular.copy(data, this);
};
Phone.query = function() {
return $http.get('phones/phones.json').then(makeArray(Phone));
}
Phone.get = function(id) {
return $http.get('phones/' + id + '.json').then(instantiate(Phone));
}
// Put other business logic on Phone here
return Phone;
});
Can this be put in the following query from parse.com (how can I write the http request bit to fit into Angular.
var query = new Parse.Query("coursesParse");
query.find({
success: function(results) {
},
error: function(error) {
}
});
You can do it this way.
Phone.query = function() {
var query = new Parse.Query("test");
query.find({
success: function(results) {
//makeArray(Phone(results));
for (var i = 0; i < results.length; i++) {
var object = {
"age": results[i].get('age'),
"carrier": results[i].get('carrier'),
"id": results[i].get('id1'),
"imageUrl": results[i].get('imageUrl'),
"name": results[i].get('name'),
"snippet": results[i].get('snippet')
};
makeArray(Phone(object));
}
},
error: function(error) {
}
});
}

Restangular no BaseUrl when do PUT

i'm using Restangular and trying to PUT some data but it seems to lose the BaseUrl.
In the config function i define the BaseUrl for Restangular and others Restangular fields.
Constants.restangularBaseUrl is http://192.168.1.100/api/
RestangularProvider.setBaseUrl(Constants.restangularBaseUrl)
.setRestangularFields({
selfLink: '_links.self.href',
id: '_id',
etag: '_etag'
})
.addResponseInterceptor(function(data, operation, what, url, response, deferred){
if (operation === 'getList') {
var result = data._items;
result._meta = data._meta;
result._links = data._links;
return result;
}
return data;
});
Then i have some models like this:
(function(){
angular.module('models.ebayItems', ['services.constants', 'restangular'])
.service('EbayItems', ['Constants', 'Restangular', function (Constants, Restangular) {
Restangular.extendModel('ebayitems', function(model) {
model.toggleMonitor = function(){
var item = this;
Restangular.one('ebayitems', this._id).patch({active: this.active}, '', {'If-Match': this._etag})
.then(function(data){
item._etag = data._etag;
}, function(error){
console.log('error', error);
});
};
return model;
});
var ebayItems = Restangular.all('ebayitems');
var ebayItemsOneSearch = function(_id){
return ebayItems.customGETLIST('', {where: {searchId: _id}});
};
return {
items: ebayItems,
oneSearch: ebayItemsOneSearch
};
}])
})();
Now when i try to do a put request with an item based on that model:
item.put()
it uses the wrong url, i mean it loses the BaseUrl, so instead of putting at:
http://192.168.1.100/api/ebayitems/12345
it puts at
http://192.168.1.100/ebayitems/12345
resulting in a 404 error.
Why?
What am i doing wrong?
Any help really appreciated.
Thank you
The problem was that setting a selfLink field that was a relative url from the API backend it overrides the BaseUrl.
Removing that field from the config function it worked.
RestangularProvider.setBaseUrl(Constants.restangularBaseUrl)
.setRestangularFields({
id: '_id',
etag: '_etag'
})
.addResponseInterceptor(function(data, operation, what, url, response, deferred){
if (operation === 'getList') {
var result = data._items;
result._meta = data._meta;
result._links = data._links;
return result;
}
return data;
});

Resources