$resource : expected response to contain an object but got an array

Question

I know this question already exists on SO (as here : Error in resource configuration. Expected response to contain an object but got an array ) and even if I've already faced this error a few days ago, I didn't find why I'm getting it now.

On the one hand, I have a RESTful API in Node Express. It gives me access to a database, where I'm trying to get some data. When using a specific $resourcerequest, I'm getting this JSON (tested with Postman) :

 [
   {
    "ref": 2,
    "type": "string here",
    "matriculeMD": 4567,
    "name": "William",
    "date": "2016-09-14T22:00:00.000Z",
    "client": 1
   },
   {
    "ref": 4,
    "type": "string here",
    "matriculeMD": 1589,
    "name": "Averell",
    "date": "0000-00-00",
    "client": 1
   }
 ]

On the other hand, I have an Angular JS app. This one use a factory to get the data from the API :

 .factory('Things', ['$resource', function($resource) {

    return $resource(

        'api_url/:client_id',
        {client_id: '@client_id'}, // getting some data from an ID
        {'query' : {
                        method : 'GET', // ofc, it's a get request in the API
                        isArray : false // to be sure to get an object and not an array
                    }
        }

I also have a controller which uses this factory, trying to execute the query with the param :

 app.controller('ctrl', ['$scope','Things', function ($scope,$things) 

    {
      $scope.thing = $things.query({},{'client_id':'1'}); 
      // replacing '@client_id' from factory with 1. I also tried with quoteless 1.
    }
 ]);

And, finally, I have an html view, where I try to use the data I'm supposed to get in $scope.thing with some <div ng-repeat'thing in things'>{{thing.ref}}</div>.

By reading other posts, I was sure that adding an isArray : false to the factory would fix the problem, as it has already fixed it in another factory.

Any idea ?

Edit : Thanks for your replies. I changed my factory code with :

.factory('Things', ['$resource', function($resource) {

        return $resource(

            'api_url/:client_id',
            {client_id: '@client_id'}, // getting some data from an ID
            {'query' : {
                            method : 'GET', // ofc, it's a get request in the API
                            isArray : true //
                        }
            }

And it fixed the error. Now, I'm working on another problem with my $scope content which is undefined and send $promise : Promise, $resolved : Resolved. I read $resource doc to understand what it means, but I still have no idea of how to make it work.

So your API is returning an array after all? isArray won't transform the data, it just tells angular what data structure to expect. — doldt, Jun 05 '15 at 07:51

avcajaraville · Answer 1 · 2015-06-05T09:10:00.023

0

As doldt said before, you are actually expecting an array.

Your response is an array of objects.

Either you change isArray to true or you change the response on the server to return an object.

Once you have this changed, you can use your resource on the controller this way (providing a callback for the $resource, since you are now dealing with promises) :

$things.query( {}, { 'client_id' : '1' }, function( response ){
    $scope.thing = response;
});

edited Jun 05 '15 at 09:10

answered Jun 05 '15 at 08:01

avcajaraville

9,041
2
28
37

So what can I do in this case ? Changing the way I'm using the data in the html file ? – Arhyaa Jun 05 '15 at 08:18
@Arhyaa call your service as `$scope.things = $things.query({},{'client_id':'1'}); ` and then you can iterate in html template like you wrote `
{{thing.ref}}
`. Of course set `isArray` to true. – kTT Jun 05 '15 at 08:19
Just change isArray to true :) – avcajaraville Jun 05 '15 at 08:34
I changed it. There's no more error, but it looks like `$scope.thing` is empty. I used `console.log` to display the scope and I'm getting `$promise : Promise, $resolved : false`. Does it mean that the query didn't succeed ? – Arhyaa Jun 05 '15 at 08:59
Updated my answer. Hope it helps – avcajaraville Jun 05 '15 at 09:10

score 0 · Answer 2 · answered Jun 05 '15 at 12:35

0

I think you are doing wrong with isArray flag. It must be true if you are sending array.

Try it....

answered Jun 05 '15 at 12:35

PAWAN RAJ Shakya

166
10

Thanks, it has already been said in the comments. There's no more error in the code, but I'm currently not able to use what I get. When I display `$scope.thing` I'm getting `$promise : Promise, $resolved : Resolved`, and my `$scope` content is undefined. I gonna edit my first post :) – Arhyaa Jun 05 '15 at 12:55
try this $things.query({},{'client_id':'1'}).$promise.then(function(data){ $scope.thing = data; }); – PAWAN RAJ Shakya Jun 05 '15 at 13:12
I did something like that just before to use the scope data as soon as the promise is set but it didn't change anything, as your solution. May I possible have missed something else, in my app structure or something like that ? – Arhyaa Jun 05 '15 at 13:21

score 0 · Answer 3 · answered Jun 05 '15 at 13:56

// Code goes here

var myApp = angular.module('myApp', ['ngResource']);

myApp.factory('Things', ['$resource',
  function($resource) {

    return $resource(

      'data/sample.json'
      //, {
      //  client_id: '@client_id'
      //}, // getting some data from an ID
      //{
      //  'query': {
      //    method: 'GET', // ofc, it's a get request in the API
      //    isArray: true // to be sure to get an object and not an array
      //  }
      //})
    )
  }
]);

myApp.controller('myCtrl', function($scope, Things) {

  Things.query({}, {
    'client_id': '1'
  }).$promise.then(function(data) {
    $scope.thing = data;
    console.log($scope.thing);
  })
});

[
   {
    "ref": 2,
    "type": "string here",
    "matriculeMD": 4567,
    "name": "William",
    "date": "2016-09-14T22:00:00.000Z",
    "client": 1
   },
   {
    "ref": 4,
    "type": "string here",
    "matriculeMD": 1589,
    "name": "Averell",
    "date": "0000-00-00",
    "client": 1
   }
 ]

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="angular.js@*" data-semver="2.0.0-alpha.26" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="myCtrl">
  <h1>{{1/2}}</h1>
  <ul ng-repeat="t in thing">
    <li>{{t.name}}</li>
  </ul>
</body>

</html>

--output 0.5

William Averell

score 0 · Answer 4 · answered Jun 05 '15 at 13:59

0

Try:

$things.query({},{'client_id':'1'}).$promise.then(function(result){
    $scope.thing = result;
    console.log($scope.thing);
});

answered Jun 05 '15 at 13:59

Arber Sylejmani

2,078
1
16
20

PAWAN RAJ told me the same thing but it didn't change anything :/ – Arhyaa Jun 05 '15 at 14:19

$resource : expected response to contain an object but got an array

4 Answers4