Angularjs $resource not working with an array returned from a REST API

Question

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/

Gwash3189 · Accepted Answer · 2013-07-24 04:50:08Z

29

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

edited Jul 24, 2013 at 4:50

answered Jul 24, 2013 at 2:45

Gwash3189

3333 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:17:07Z

11

Just wanted to cross-post my adaptation of a solution Aleksander gave on another stackoverflow question: https://stackoverflow.com/a/16387288/626810:

methodName: {method:'GET', url: "/some/location/returning/array", transformResponse: function (data) {return {list: angular.fromJson(data)} }}

So when I call this function:

var tempData = ResourceName.methodName(function(){
  console.log(tempData.list); // list will be the array in the expected format
});

Obviously this a little bulky if you need to GET arrays in multiple methods / resources, but it seems to work.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Mar 18, 2014 at 21:17

Blaskovicz

6,1907 gold badges43 silver badges50 bronze badges

1 Comment

Peter.Wang Over a year ago

transformResponse: function (data, headers) { return { count: angular.fromJson(data) } } // works perfect for me. Thanks!

Fanda · Accepted Answer · 2013-03-31 06:30:13Z

7

Use isArray param, if you have nested objects:

angular.module('privilegeService', ['ngResource']).
factory('Privilege', function ($resource) {
    return $resource('api/users/:userId/privileges', 
                     {userId: '@id'}, 
                     {'query':  {method:'GET', isArray:false}});
});

Than you can use container.object.property notation to access objects and its properties.

answered Mar 31, 2013 at 6:30

Fanda

3,8166 gold badges42 silver badges57 bronze badges

1 Comment

John Bliss Over a year ago

The isArray param is already there. Setting it to true or false has no effect in this case. Can you please take a look at the jsfiddle and advise what exactly needs to be done to get the data bound. Thanks

Community · Accepted Answer · 2017-05-23 12:24:59Z

0

Not sure if we are having the same problem with json and REST, but this post solved my problem: array of strings not rendered correctly through angular resource

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Feb 25, 2014 at 23:05

Tony Z

1941 silver badge8 bronze badges

Comments

Magne · Accepted Answer · 2014-07-03 20:18:55Z

0

The array you get back from the server isn't a clean array, but has some extra properties. That makes ng-repeat not show anything when you iterate over it using in.

You need a special iterator to go over the array from the server, which will ignore those extra properties. So extract the array data through forEach first, like this:

$scope.items = []
var response = $scope.svc.get();
angular.forEach(response, function(item) {
  $scope.items.push(item);
});

Then you can do

<tr ng-repeat="item in items">

answered Jul 3, 2014 at 20:18

Magne

17.4k11 gold badges75 silver badges97 bronze badges

Comments

Brayden Hancock · Accepted Answer · 2016-03-08 20:42:04Z

0

I had similar problem and non of the answers quite worked for me, heres what i did:

    $resource("/", {}, {
       query: {
            method: 'GET',
            isArray: false,
            transformResponse: function (data, headers) {
                //if no data return so no warnings
                if (data == ''){
                    return;
                }

                return {data: $.extend({}, eval("{" + data + '}'))};
            }
        }
   });

Uses jquery. Basically convert array to object so angularjs resource doesn't poop its pants.

answered Mar 8, 2016 at 20:42

Brayden Hancock

8062 gold badges8 silver badges22 bronze badges

1 Comment

Dobes Vandermeer Over a year ago

Sorry eval to parse JSON ? Please don't! Use JSON.parse!

Collectives™ on Stack Overflow

Angularjs $resource not working with an array returned from a REST API

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related