Expected response to be an object, but it is

Question

Using resource.get() I get this error:

"Error in resource configuration. Expected response to contain an object but got an array".

If I configure the resource to expect an array I get this instead:

"Error in resource configuration. Expected response to contain an array but got an object"

Here is what I am getting back if I dump the response from Advanced Rest Client:

{
    "Note": {
        "id": "1",
        "clas": "test",
        "obj_id": null,
        "note": "test"
    }
}

That looks like an object to me. What's weird is that the page is still working just fine. But I get that error in the console.

Factory:

angular.module('app').factory('Notes', function($resource) {
    var notes = $resource('/index.php/notes/:id.json');
    return {
        get: function(id, success) { notes.get({id:id}, function(resp) { success(resp.Note); }); },
        query: function() { return notes.query(); }
    }
});

Controller

angular.module('app').controller('NotesCtrl',
    function($scope, $stateParams, $state, $location, Notes) {
        Notes.get($stateParams.id,
            function(note) {
                $scope.note = note;
            },
            function(note) {
                console.log('error');
                console.log(note);
            }
        );
    });

That resource is built using CakePHP and that is the vanilla view function that bake makes for you that is being serialized.

Answer 1

I guess just so anyone else with a similar knows there is a solution (or at least the glimmerings of one), I'll do a formal answer here. Seeing how php doesn't speak json natively, it can produce questionably-formed json that angular can't parse. To make sure the issue isn't (or is) the json, bypass the php and spoof the json.

To spoof an api, create a new controller and insert the expected json into the scope.

app.controller('NoteCtrl', function($scope) {
    $scope.allNotes = [{
        "Note": {
            "id": "1",
            "clas": "test",
            "obj_id": null,
            "note": "test"
        }       
    }];
});

Replace any reference to the api/json with this new scope, ie change

var notes = $resource('/index.php/notes/:id.json'); 

to:

var notes = $scope.allNotes;

...and then test. If things go right, then it's not your angular nor your json, it's probably your php. That'll at least narrow things down on the list o' troubleshooting ideas.

Answer 2

I got this error because I had two requests in the same Angular.js controller:

 function UserCtrl($scope, $resource, $routeParams, API) {
   $scope.users = API.Users.query();
   $scope.user = API.Users.get({ id:$routeParams.id });
 };

So on one page, you would get the error, but not on the other.

Here is another way to achieve it (that mirrors the Phone tutorial on step 11 - http://docs.angularjs.org/tutorial/step_11):

<div class="container" style="border:solid 1px grey">
  <div ng-view>
  </div>
</div>

<script>
  var app = angular.module('myApp', ['ngRoute', 'ngResource']);

  app.config(function($routeProvider) {
    $routeProvider.when('/users/', { templateUrl: 'assets/users/index.html', controller: UserListCtrl });
    $routeProvider.when('/users/:id', { templateUrl: 'assets/users/show.html', controller: UserCtrl });
 });

  app.factory('API', ['$resource', function($resource) {
    return {
      Users: $resource('/users/:id.json')
    };
  }]);

  function UserListCtrl($scope, $resource, API) {
    $scope.users = API.Users.query();
  };

  function UserCtrl($scope, $resource, $routeParams, API) {
    $scope.user = API.Users.get({ id:$routeParams.id });
  };

</script>