Resource expecting an array but it's getting an object with an array inside. Angularjs + resource

Question

I'm new in Angularjs and got a doubt. I'm using $resource to consume a Rest Web Service this way:

providersApp.factory('providersSrvc', function ($resource) {
    return {
        getData: function () {
            return $resource('http://devfz.azurewebsites.net/api/providers', {}, {
                query: { method: 'GET' }
            });
        }
    }
});

Here is my controller:

providersApp.controller('ProvidersController',
    function ProvidersController($scope, providersSrvc) {
        $scope.providers = providersSrvc.getData().query();
    });

This Rest URL is returning a JSON object with an array inside it (correct me if I am wrong):

{"$id":"1","$values":[{"$id":"2","Id":1,"Name":"Diagnose","Category":null,"Address":null,"Services":null},{"$id":"3","Id":2,"Name":"Hospital São lucas","Category":null,"Address":null,"Services":null},{"$id":"4","Id":3,"Name":"Hospital Primavera","Category":null,"Address":null,"Services":null}]}

I've found a way to iterate it like this:

provider in providers.$values

My question is: Is this considered a good way to iterate it? All examples I found in internet seems to return JSON array, not an array inside a JSON object like mine. Is anything wrong with my Restful JSON return? Is there a better way to do all this?

Thanks so much for any help!

Check out an example at the Angular phonecat tutorial. The docs for $resource also mention isArray, but not much. — crennie
– crennie, Commented Jun 3, 2014 at 18:50
If I use "isArray:true", i get an error saying the it expects an array, but gets an object. This object has an array inside. — Italosnt
– Italosnt, Commented Jun 3, 2014 at 19:12
Oh I see. Sorry I didn't pay enough attention to the api you linked. Services are objects whose API is defined by the developer writing the service, and this service defines an object with an $id and $values field... so there's no way to get an array from it directly. What you have for parsing is good but I'd recommend (if you plan on using $values as an array in your controller/template) assigning it to a $scope variable in a callback. — crennie
– crennie, Commented Jun 3, 2014 at 20:09

crennie · Accepted Answer · 2014-06-03 20:42:22Z

Nothing's wrong with your return or your code. I doubt the $id value from the service is as useful for you as the actual array of provider content, so I'd recommend giving the array its own scope variable, so that access to it from the template are cleaner. If you have to do cleanup or anything, you can also do that in the callback.

foo.js

providersApp.controller('ProvidersController',
    function ProvidersController($scope, providersSrvc) {
        $scope.providers = providersSrvc.getData().query().then(function(data) {
            return data.$values.filter(function (provider) {
                return (provider.Category === null);
            }
        }
    });

foo.html

<ul>
  <li ng-repeat="provider in providers">
    {{provider.Name}}
    {{provider.Diagnose}}
    {{provider.Category}}
    {{provider.Address}}
    {{provider.Services}}
  </li>
</ul>

As a P.S: "provider" is a concept in Angular, so you may want to consider renaming your domain language to be something like "Hospitals" or "CareProvider" instead to avoid confusion :)

Glad the combination of answer + comments could help clear things up! :) Consider accepting this answer if you're satisfied.
Done! I can't vote it up because i don't have enough reputation :D
That's alright. Now people who might have a similar problem can see that this question has a chosen answer and that they may be able to find a solution here. This is a QnA site after all!

Collectives™ on Stack Overflow

Resource expecting an array but it's getting an object with an array inside. Angularjs + resource

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related