$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.

Answer 1

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;
}); 

Answer 2

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

Try it....

Answer 3

// 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

Answer 4

Try:

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