Angularjs $resource not working with an array returned from a REST API
angularjs, angularjs-ng-repeat
Solution
In order to handle arrays with the $resource service, it's suggested that you use the query method. As you can see below, the query method is built to handle arrays.
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
The code you should use in order to return this array to your scope is
angular.module("ToDoApp", ["ngResource"]);
function TodoCtrl($scope, $resource) {
var svc = $resource('http://testv1.cloudapp.net/test.svc/persons');
$scope.items = svc.query();
$scope.msg = "Hello World";
}
This assumes that your REST API is working and will return an array.
For further reading head to the docs
http://docs.angularjs.org/api/ngResource.$resource
Problem
I am trying to learn angularjs, and have hit a block in trying to databind to an array returned from a Rest API. I have a simple azure api returning an array of person objects. Service url is http://testv1.cloudapp.net/test.svc/persons. My controller code looks like: ``` angular.module("ToDoApp", ["ngResource"]); function TodoCtrl($scope, $resource) { $scope.svc = $resource('http://testv1.cloudapp.net/test.svc/persons', { callback: 'JSON_CALLBACK' }, { get: { method: 'JSONP', isArray: true } }); $scope.items = $scope.svc.get(); $scope.msg = "Hello World"; } ``` My html looks like: ``` <html> <head></head> <body> <div ng-app="ToDoApp"> <div ng-controller="TodoCtrl"> <h1>{{msg}}</h1> <table class="table table-striped table-condensed table-hover"> <thead> <th>Email</th> <th>First Name</th> <th>Last Name</th> </thead> <tbody> <tr ng-repeat="item in items"> <td>{{item.Email}}</td> <td>{{item.FirstName}}</td> <td>{{item.LastName}}</td> </tr> </tbody> </table> </div> </div> </body> </html> ``` Question: The table in above html is not displaying any data. I can see the call to the api in Firebug, and can also see the JSON response from the api. What am I doing incorrectly that is causing the databinding to the REST api not work? PS:JSFiddle demonstrating this issue is at: http://jsfiddle.net/jbliss1234/FBLFK/4/