I have a build an app
var HappySundayonEtsyApp = angular.module('HappySundayonEtsyApp', ['ngResource']);
with a controller like
HappySundayonEtsyApp.controller('ListingsController',
function ListingsController ($scope, $filter, Listings, $resource) {
$scope.sortingOrder = sortingOrder;
...
The controller is working fine with some static JSON added in the controller for testing. When I try to get data with a service defined as
HappySundayonEtsyApp.factory('Listings', ['$resource', function ($resource) {
var resource = $resource('/listings/:id', {
id : '@id'
}, {
index : { method: 'GET', isArray : true },
save : { method : 'PUT' }
});
return resource;
}]);
and in the controller
$scope.items = Listings.get()
nothing works. The URL delivers perfectly fine JSON as I verified with a simple
$http.get('/listings/').success(function(data){
$scope.items = data;
});
In the debugger (Chrome) I see
Listings.get(): h
__proto__: h
I am using version 1.0.3. I would really appreciate if somebody can help, I am deeply frustrated after reading, trying and debugging for 2 days. Probably it is something simple...
Thanks.
When using $resource
, calling the .get
method doesn't return the response from the HTTP call, it just returns a promise of it. This means that $scope.items WILL IN THE FUTURE contain the result.
To be sure that $scope.items
contains the response of the HTTP/$resource call assign $scope.items in the callback instead:
Listings.get(function (response) {
$scope.items = response;
});
However, let's say you have this:
<ul>
<li data-ng-repeat="item in items"></li>
</ul>
Then you can use this: $scope.items = Listings.get()
Due to that when the promise is fulfilled the repeat will be updated and iterate over all items.
Actually, it looks like your JSON is an array, and you specifically defined index
action
where you set isArray : true
, so you probably meant to do:
$scope.items = Listings.index();