how to fix Expected response to contain an array but got an object ANgular js

Question

i am new one so difficult to getting this error using resource module after calling service. can any one modify my mistake in code where i am getting wrong or just modified that pieace of which needs to rectify thanx must be appreciated.

Format Of data Coming:-

[
    brands: Array[1]
    0: Object
    __v: 0
    _id: "5251a4a34f232fc3902"
    account_id: "525072320e32971b"
    name: "Fruits"
    __proto__: Object
    1: Object
    length: 2

    categories: Array[1]
        0: Object
        __v: 0
        _id: "5251a4a34f2323fc3902"
        account_id: "5250723230e32971b"
        name: "Fruits"
        __proto__: Object
        1: Object
        length: 2
]

Error:-

[$resource:badcfg] Error in resource configuration. Expected response to contain an array but got an object

itmsFormView.html

<select class="form-control" ng-model="item.brand_id" id="itemBrand" >
    <option value="">Select Brand</option>
    <option ng-repeat="brand in brands" value="{{brand.brand_id}}">{{brand.name}}  </option>
</select>



 <select class="form-control" ng-model="item.category_id" id="itemCategory">           

<option value="">Select Category</option>
       <option ng-repeat="category in categories" value="{{category.brand_id}}">{{category.name}}</option>
    </select>

ItemsService.js

app.factory('itemService', function ($resource) {
    return {
        getCategoryAndBrand   :  $resource("/user/categories_brands" ,{},{ TypeGetCategoryAndBrand:{method: 'get', isArray:true}})
    };
});

ItemsController.js

app.controller('itemsFormController', function ($rootScope, $scope, itemService, $location, $cookies, $routeParams) {
        itemService.getCategoryAndBrand.TypeGetCategoryAndBrand({}, function(response){
                console.log(response);

            },function(errorResponse){
                console.log(errorResponse);
            }
        );  
});

Answer 1

From the documentation:

Action isArray

isArray – {boolean=} – If true then the returned object for this action is an array, see returns section.

According to your code isArray = true. Set it to false and you can use an object instead of an array.

app.factory('itemService', function ($resource) {
return {
        getCategoryAndBrand   :  $resource("/user/categories_brands" ,{},{ TypeGetCategoryAndBrand:{method: 'get', isArray:true}})
    };
});

It's expecting you to pass in the parameters as an array not an object

from your code

$resource("/user/categories_brands" ,{},{ TypeGetCategoryAndBrand:{method: 'get', isArray:true}})

If the documentation is to be believed than with the error your getting I'd try to pass this in the form of an array and not an object to see if you get the same response.

Answer 2

In my case, the API server was returning an HTML page (an error page) that is treated as a string, instead of the correct JSON response which would be a javascript object.

As a sidenote, javascript errors and stacktraces are really something.

Answer 3

Hope this answer is not too late.

You should not fix this problem by putting a isArray:true statement to override "get" method's nature in your resource declaration.

There are two ways to fix this problem.

1.Use "query" method instead. It works like "get" method totally, but its isArray is set to true naturally.

TypeGetCategoryAndBrand:{method: 'query'}

2.On the server side, responding an object is a much easier and much smarter way. You can continue using "get" method on your client side and change your server side code from this:

res.jsonp(articles);

where articles is the result array, to this:

res.jsonp(articles[0]);