In my AngularJS project I'm trying to use the Restangular getList method but it's returning an error because the API response is not directly an array but an object containing an array.
{
"body": [
// array elements here
],
"paging": null,
"error": null
}
The Restangular error message is:
Error: Response for getList SHOULD be an array and not an object or something else
Is it possible to tell Restangular that the array it's looking for is inside the body property?
Yes, see the Restangular documentation. You can configure Restangular like so:
rc.setResponseExtractor(function(response, operation) {
if (operation === 'getList') {
var newResponse = response.body;
newResponse.paging = response.paging;
newResponse.error = response.error;
return newResponse;
}
return response;
});
Edit: It seems Restangular's API is now changed, for the better, and that the current method to use is addResponseInterceptor. Some adjustments might be needed to the function passed.
I think you should use a the customGET from the Custom Methods
Restangular.all("url").customGET(""); // GET /url and handle the response as an Object
as Collin Allen suggested you can use addResponseInterceptor like this:
app.config(function(RestangularProvider) {
// add a response intereceptor
RestangularProvider.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
var extractedData;
// .. to look for getList operations
if (operation === "getList") {
// .. and handle the data and meta data
extractedData = data.body;
extractedData.error = data.error;
extractedData.paging = data.paging;
} else {
extractedData = data.data;
}
return extractedData;
});
});
Related
There are two ways I can GET a REST resource by ID:
GET /users/1
GET /users/1,2
The first returns a single object like {id:1,name:"John"} while the second returns an array like [{id:1,name:"John"},{id:2,name:"Jill"}].
Please, no arguments about whether or not this is legit REST; just accept that a service has this and I need to work with it.
angular's $resource actually intelligently handles it from the request side:
User.get({users:['1','2']})
transforms into
GET /users/1,2
But it doesn't handle the response well. It expects a single object. If I change the definition to isArray:true, then it fails on a single request GET /users/1
How do I get it to intelligently handle both?
EDIT: I did some weird hacking to get it to work, but would prefer a native method:
factory('Resource',['$resource','_',function ($resource,_) {
return function(url,params,methods){
var defaults = {
getSingle: {method: 'get', isArray:false},
getMultiple: {method: 'get', isArray:true}
}, resource = $resource(url,params,angular.extend(defaults,methods)), urlParams = {};
_.each(url.split(/\W/), function(param){
if (param && (new RegExp("(^|[^\\\\]):" + param + "\\W").test(url))) {
urlParams[param] = true;
}
});
// do not override if they did
if (!(methods||{}).get) {
resource.get = function (params,success,error) {
// look for multiples
var isMultiple = false;
_.each(params,function (val,key) {
if (key && urlParams[key] && angular.isArray(val)) {
isMultiple = true;
return(false);
}
});
return this[isMultiple?"getMultiple":"getSingle"](params,success,error);
};
}
return(resource);
};
}]).
The normal convention is to create a Resource.get() method for single objects, and a Resource.query() method for arrays of them.
I had a similar issue with the WP-API when trying to do a PUT request to a post. Currently that API returns an object representing the post if everything went okay, but if there is an error (eg the authorization credentials don't match) then it returns an array of errors. So I was getting the error Error: [$resource:badcfg] Error in resource configuration. Expected response to contain an object but got an array.
I managed to find a solution by using the transformResponse property on my custom action object. I define a function which inspects the response and then if it is an array, it converts the array into an object. This seems to work okay, and seems a bit less complex than the solution you posted in your update:
var wpPost = $resource(PATH_TO_WORDPRESS_API + 'posts/:id', {},
{
'update': {
method: 'PUT',
params: {id: '#id'},
transformResponse: function(data) {
var response = angular.fromJson(data);
if (response.length) {
// the response is an array, so convert it into an object
var object = {};
for( var i = 0; i < response.length; i ++) {
object[i] = response[i];
}
return object;
} else {
return response;
}
}
}
});
I have a service that returns a promise. I would like to check if the value returned is an empty object. How can I achieve this. I guess I need to extract the returned value from the promise object somehow.
Here's my resource:
app.factory('Auth', ['$resource',
function($resource) {
return $resource('/user/identify', {}, {
identify: {
url: '/user/identify'
},
});
}
]);
Then in a service:
Auth.identify(function(data) {
// This always passes since data contains promise propeties
if (!_.isEmpty(data)) {
}
});
A console log of data gives:
Resource
$promise: Object
$resolved: true
__proto__: Resource
I can check for expected properties when the object is not empty but would like a more generic method.
To unwrap the return value you can access the promise directly:
Auth.identify()
.$promise
.then(function(data) {
if (!_.isEmpty(data)) {
// ...
}
});
You're so close. You shouldn't call the response "data" when it is in fact a Resource object, which looks a lot like the Resource object you posted:
$resource('/api/...').get({...}).then(function(response) {
if (response.data) {
// the response has a data field!
}
}
// note: this is using query(), which expects an array
$resource('/api/...').query({...}).then(function(response) {
if (response.length > 0) {
// the response data is embedded in the response array
}
});
I have a service with rest angular with following structure
function countrySvc(restangular) {
restangular.addResponseInterceptor(function (data, operation, what, url, response, deferred) {
if (operation === 'getList') {
var newResponse = response.data;
return newResponse;
}
return response;
});
var baseCountry = restangular.all('country');
this.countries = function() {
baseCountry.getList();
};
}
also a controller
function countryCtrl(scope, countrySvc) {
scope.countries = countrySvc.countries();
}
but when i access the countries from controller, the result is empty with a successful request with data, my question is how a can extract the data from response with proper promise pattern, ie( i need array of countries when i access scope.countries)
You need to resolve promise...
There are two ways to do it...
1) Using $object
just add .$object to end of promise so once request is done it resolves promise...
scope.countries = countrySvc.countries().$object;
2) Using then
if you need to do some stuff after promise is resolved pick this option, once request is done callback function in then will be fired
scope.countries = countrySvc.countries().then(function (response){
// DO SOMETHING IF YOU NEED BEFORE SET OBJECT
scope.countries = response;
// DO SOMETHING IF YOU NEED AFTER SET OBJECT
});
I'm trying to figure out if it is possible to use a $http interceptor to cancel a request before it even happens.
There is a button that triggers a request but if the user double-clicks it I do not want the same request to get triggered twice.
Now, I realize that there's several ways to solve this, and we do already have a working solution where we wrap $http in a service that keeps track of requests that are currently pending and simply ignores new requests with the same method, url and data.
Basically this is the behaviour I am trying to do with an interceptor:
factory('httpService', ['$http', function($http) {
var pendingCalls = {};
var createKey = function(url, data, method) {
return method + url + JSON.stringify(data);
};
var send = function(url, data, method) {
var key = createKey(url, data, method);
if (pendingCalls[key]) {
return pendingCalls[key];
}
var promise = $http({
method: method,
url: url,
data: data
});
pendingCalls[key] = promise;
promise.finally(function() {
delete pendingCalls[key];
});
return promise;
};
return {
post: function(url, data) {
return send(url, data, 'POST');
}
}
}])
When I look at the API for $http interceptors it does not seem to be a way to achieve this. I have access to the config object but that's about it.
Am I attempting to step outside the boundaries of what interceptors can be used for here or is there a way to do it?
according to $http documentation, you can return your own config from request interceptor.
try something like this:
config(function($httpProvider) {
var cache = {};
$httpProvider.interceptors.push(function() {
return {
response : function(config) {
var key = createKey(config);
var cached = cache[key];
return cached ? cached : cached[key];
}
}
});
}
Very old question, but I'll give a shot to handle this situation.
If I understood correctly, you are trying to:
1 - Start a request and register something to refer back to it;
2 - If another request takes place, to the same endpoint, you want to retrieve that first reference and drop the request in it.
This might be handled by a request timeout in the $http config object. On the interceptor, you can verify it there's one registered on the current request, if not, you can setup one, keep a reference to it and handle if afterwards:
function DropoutInterceptor($injector) {
var $q = $q || $injector.get('$q');
var dropouts = {};
return {
'request': function(config) {
// I'm using the request's URL here to make
// this reference, but this can be bad for
// some situations.
if (dropouts.hasOwnProperty(config.url)) {
// Drop the request
dropouts[config.url].resolve();
}
dropouts[config.url] = $q.defer();
// If the request already have one timeout
// defined, keep it, othwerwise, set up ours.
config.timeout = config.timeout || dropouts[config.url];
return config;
},
'requestError': function(reason) {
delete dropouts[reason.config.url];
return $q.reject(reason);
},
'response': function(response) {
delete dropouts[response.config.url];
return response;
},
'responseError': function(reason) {
delete dropouts[reason.config.url];
return $q.reject(reason);
}
};
}
I have an AngularJS $resource:
App.factory("pjApi", ["$resource", function($resource) {
return $resource("/api/:user/:action/:post_id/", {action:"posts"});
}]);
and in my controller, I basically use it like this:
$scope.deletePost = function(post_id) {
$scope.posts.forEach(function(post) {
if (post_id === post.id)
post.$delete({user:"tjb1982",action:"delete",post_id:post.id});
});
}
The server gives a response with status 200, application/json, and body: "1"
What Angular does with this response is to remove the deleted instance of the Resource object, but then Angular replaces it with the response from the server (i.e. "1"), as if I were creating or updating:
posts
[Resource { 0="1", $$hashKey="00D", $get=function(), more...}]
etc.
So my template is updated with this new (mostly blank) information, which is what I'm trying to avoid. I've tried returning nothing from the server or "0"-- returning nothing results in the Resource instance being preserved entirely and returning "0" results in the same as returning "1".
What response is Angular looking for in order for this Resource instance to be removed entirely so that my template renders correctly?
Calling $delete on a resource only sends the HTTP request to the server; if you want to remove the item from some client side representation--such as an array--you must do so yourself.
So, for your example, you might try something like the following:
$scope.deletePost = function(post_id) {
$scope.posts.forEach(function(post, index) {
if (post_id === post.id) {
post.$delete({user:"tjb1982",action:"delete",post_id:post.id}, function() {
$scope.posts.splice(index, 1);
});
}
});
}
// instance is cleared on success
post.$delete({/* request data */}, function() {
// remove empty element from array
$scope.posts = $scope.posts.filter(function(el) {
return el.id !== undefined;
});
});