So I'm currently working with $ngResouce. My api: api/Content/resource/user.post.failed returns the following:
{
"user.post.failed": "Thing.."
}
app.factory('testResource', function ($resource) {
return $resource(apiurl + '/Content/resource/:resourcename', {}, {
show: { method: 'GET', isArray: false, params: {resourcename: '#resourcename'} },
update: { method: 'PUT', params: {id: '#id'} },
delete: { method: 'DELETE', params: {id: '#id'} }
})
});
This is what I call in my controller
$scope.test = testResource.get({resourcename: 'test'});
The question is actually really simple; how do I get just the 'content part' so test. I'm now getting the whole JSON part back.
So the scope test is now: {"user.post.failed":"Thing.."}
And I want the scope to be just Thing.
Probably really simple, but I couldn't find the answer.
Use the $promise property of the object to see errors:
$scope.test = testResource.get({resourcename: 'test'});
$scope.test.$promise.catch(function onReject(response) {
console.log('ERROR: ',response.status);
console.log(response);
});
So the scope test is now: {"user.post.failed":"Thing.."} And I want the scope to be just Thing.
console.log($scope.test["use.post.failed"]);
Use the property accessor syntax.
For more info see MDN JavaScript Reference -- Property Accessors
HTML
{{ test["use.post.failed"] }}
testResource.get({resourcename: 'test'}, function(data) {
$scope.test = data['user.post.failed'];
})
Related
I want to make a search query to my server with angularjs resource object and i have written such an resource object;
app.factory('EcriDeviceListService', function ($resource) {
var Url = "http://localhost:60766/api/EcriDeviceLists/:id/:queryText";
return $resource(Url, { id: '#Id' },{ update: { method: 'PUT' },'search': { method:'GET', {queryText:''}})
});
with this code i want to make a search query like this;
EcriDeviceListService.search({queryText:'abc'})
http://localhost:60766/api/EcriDeviceLists/queryText=abc"
how should i configure my resource object.
Thanks.
You should configure $resource object like this:
$resource('http://localhost:60766/api/EcriDeviceLists/:id/:queryText', {
id: '#Id',
queryText: ''
}, {
update: {
method: 'PUT'
},
search: {
method: 'GET'
}
});
I'm trying to update data in an object on the view, my service looks like this:
.service('Tag', function Tag($resource, API) {
return $resource(API.baseUrl + '/api/tags/:id', { id:'#_id' }, {
update: {
method: 'PUT', params: {id: '#id'}},
delete: {
method: 'DELETE', params: {id: '#id'}}
})
});
my Controller
angular.module('myApp')
.controller('EditorTagsCtrl', function ($scope, Tag,$routeParams) {
$scope.tag = Tag.query()
$scope.updateTag = function()
{
Tag.update()
console.log ('working?')
}
});
Im getting a 404 error and the data is not passing to the back end.
Please help
I am trying to understand the logic of this factory thing. How can I use those variables, like save, drop, update. Can i use them like this ? X . Or i have to write something else to success.
app.factory("Inventory", function($resource){
return $resource(
"http://localhost/api/v1/inventory/:Id",
{Id: "#Id"},
{
update: {
method: 'POST',
params: {"update": true},
isArray: false
},
save: {
method: 'PUT'
},
create: {
method: 'POST'
},
drop: {
method: 'DELETE'
}
}
);
});
You need to define a controller and inject the dependency on it for you to be able to use this factory.
Example:
app.controller('myController', function($scope, Inventory) {
$scope.drop = Inventory.drop;
});
in your html:
<div ng-controller='myController'>
X
</div>
I have a factory that returns the $resource for my Article model:
angular.module('ADI.Resources').factory("Articles", ['$resource', function($resource) {
return $resource('/api/v1/article/:articleId', {
articleId: '#_id',
_shop: window.user._shop
}, {
update: {
method: 'PUT'
}
});
}]);
GET, POST and DELETE are working well, but not the update (PUT). Here is the code I use:
Articles.update({articleId: '300000000000000000000001'}, function(article){
console.log(article);
});
It's making this request:
PUT http://localhost:3000/api/v1/article?_shop=100000000000000000000001
instead of:
PUT http://localhost:3000/api/v1/article/300000000000000000000001?_shop=100000000000000000000001
Any idea why the :articleId parameter is not filled when doing an update? Thanks!
As Fals mentionned in the comment, the articleId parameter was in the request content. So I made a little trick to have it also on the URI.
angular.module('ADI.Resources').factory("Articles", ['$resource', function($resource) {
return $resource('/api/v1/article/:articleId', {
articleId: '#_id',
_shop: window.user._shop
}, {
update: {
method: 'PUT',
params: {
articleId: "#articleId"
}
}
});
}]);
I had the same problem, the issue here was for the following line:
articleId: '#_id',
that line should be:
articleId: '#articleId',
articleId not need to be defined again.
I am attempting to implement a abstraction over a RESTful back-end for my persistence layer and have ran into something I find a little confusing. I am using the angular framework and more specifically the ngResource module to get access to the $resource service. I can execute my queries and work against the back-end without issue. My problem comes when integrating back into my kendo-ui datasource, the datasource never recognizes when the query has returned. From my understanding the $resource will immediately return a empty collection (array) for possible assignment and then populate that array with the results of the query when it finishes. Kendo-ui's DataSource should watch this variable and upon update reflect this back to anyone leveraging the datasource. I have successfully implemented this using a slightly different model (passing a object literal that I update myself as required) and the DataSource has no problem recognizing the updates. Any insight would be helpful!
app.provider('remotePersistence', function () {
this.$get = function ($resource) {
var definitions = {
widgets: $resource('http://127.0.0.1:3000\:3000/widget.json',{},{
archive: { method: 'POST', params: { archive: true }},
active: { method: 'POST', params: { active: true }}
})
};
var datastore = {}
var namespaces = ['widgets'];
namespaces.forEach(function (namespace) {
datastore[namespace] = {
endpoint: definitions[namespace],
cache: definitions[namespace].query()
};
});
return datastore;
};
});
app.controller(
"WidgetsSearchController",
function ($scope, remotePersistence){
$scope.widgets = undefined;
$scope.visibleWidgets = new kendo.data.DataSource({
// data: remotePersistence.widgets.cache,
transport: {
read: function (options) {
options.success(remotePersistence.widgets.cache);
}
}
});
});
//This works but is not desirable style
//$scope.widgets = remotePersistence.widgets.query(function(){ $scope.visibleWidgets.data($scope.widgets) });
The data source needs to be notified that data has been received. Perhaps the ngResource module will trigger some callback or event when it finishes loading data. Then you can use the data() method of the Kendo DataSource to populate it with data items. All Kendo UI widgets bound to that data source will receive a notification when you use the data method.
For anyone following behind here is my current implementation that works nicely. I am still a bit unhappy with the manipulation I must do for the sort to be passed but it works along with paging.
app.controller(
"WidgetSearchController",
function ($scope, remotePersistence){
$scope.visibleWidgets = new kendo.data.DataSource({
widget: {
read: function (options) {
if(options.data.sort){
options.data.order = _.map(options.data.sort, function (sortItem) {
return sortItem.field + " " + sortItem.dir
}).join(", ");
}
remotePersistence.widgets.endpoint.query(options.data, function(response){
console.log(response);
options.success(response);
});
}
},
schema: {
data: "widgets",
total: "total"
},
pageSize: 20,
serverSorting: true,
serverPaging: true
// serverFiltering: true
});
});
app.provider(
'remotePersistence',
function () {
this.$get = function ($resource) {
var definitions = {
widgets: $resource('http://127.0.0.1:3000\:3000/widgets/:id',{ id: '#id' },{
archive: { method: 'PUT', params: { archive: true }},
update: { method: 'PUT' },
active: { method: 'PUT', params: { active: true }},
query: { method: 'GET', isArray: false},
})
};
var datastore = {}
var namespaces = ['widgets'];
namespaces.forEach(function (namespace) {
datastore[namespace] = {
endpoint: definitions[namespace],
cache: definitions[namespace].query()
};
});
return datastore;
};
});