Expected response to contain an object but got an array

Question

I get this error, I found many thread with the same message, but it never seems to match my case, and I didn't manager to solve it.

Basivally, everything was ok until I tried to make 1 form for create and update a 'Car' object.

Here is a presentation of my app (build from this template: https://github.com/linnovate/mean):

/public/js/config.js:

[...]
  .state('edit car', {
    url: '/cars/:carId/edit',
    templateUrl: 'views/cars/edit.html'
})
  .state('create car', {
    url: '/cars/create',
    templateUrl: 'views/cars/edit.html'
})

/public/js/services/mycars.js (don't really know what services are used for...):

//Cars service used for car REST endpoint
angular.module('mean.mycars').factory('Cars', ['$resource', function($resource) {
return $resource('cars/:carId', {
    carId: '@_id'
}, {
    update: {
        method: 'PUT'
    }
});
}]);

public/js/controllers/mycars.js:

angular.module('mean.mycars').controller('MyCarsController', ['$scope', '$http', '$stateParams', '$location', 'Global', 'Cars',
function ($scope, $http, $stateParams, $location, Global, Cars) {

    $scope.findOneOrCreate = function () {
        // create a new car
        var car = new Cars({
            id : null,
            marque: this.marque,
            modele: this.modele,
            desc: this.desc
        });

        // put new car in scope
        $scope.car = car;

        // if there is a param, search for the car (mode update)
        if ($stateParams.carId !== null){
            Cars.get({
                carId: $stateParams.carId
            }, function(carTmp) {
                       // put the result in scope
                        $scope.car = carTmp;
                    });
        }
    };

   $scope.createOrUpdate = function () {
        var car = $scope.car;

        if (car.id !== null) {
        // update
            if (!car.updated) {
                car.updated = [];
            }
            car.updated.push(new Date().getTime());

            car.$update(function () {
                $location.path('cars/' + car._id);
            });
        }
        else {
            //Create
            car.$save(function (response) {
                $location.path('cars/' + response._id);
            });
        }
    };

And finally my view: edit.html:

<section data-ng-controller="MyCarsController" data-ng-init="findOneOrCreate()">
    <form class="form-horizontal col-md-6" role="form" data-ng-submit="createOrUpdate()">
        <div class="form-group">
            <label for="title" class="col-md-2 control-label">Title</label>
            <div class="col-md-10">
                <input type="text" class="form-control" data-ng-model="car.modele" id="title" placeholder="Title" required>
            </div>
        </div>
        <div class="form-group">
            <label for="content" class="col-md-2 control-label">Content</label>
            <div class="col-md-10">
                <textarea data-ng-model="car.marque" id="content" cols="30" rows="10" placeholder="Content" class="form-control" required></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
        </div>
    </form>
</section>

Edit to add infos: The web Services are supposed to return only one car (but not sure if they do), here they are:

exports.car = function(req, res, next, id) {
Car.load(id, function(err, car) {
    if (err) return next(err);
    if (!car) return next(new Error('Failed to load car ' + id));
    req.car = car;
    next();
});
};

exports.create = function(req, res) {
var car = new Car(req.body);
car.user = req.user;

car.save(function(err) {
    if (err) {
        return res.send('users/signup', {
            errors: err.errors,
            car: car
        });
    } else {
        res.jsonp(car);
    }
});
};

exports.update = function(req, res) {
var car = req.car;

car = _.extend(car, req.body);

car.save(function(err) {
    if (err) {
        return res.send('users/signup', {
            errors: err.errors,
            car: car
        });
    } else {
        res.jsonp(car);
    }
});
};

Error message appears when I go to /cars/create, not when I go to /cars/:carsId/edit:

Error: [$resource:badcfg] Error in resource configuration. Expected response to contain an object but got an array
http://errors.angularjs.org/1.2.15/$resource/badcfg?p0=object&p1=array

Answer 1

Is your web service returning an array? The get method expects only one object to be returned, and the same with your PUT request if you're returning something. If you're expecting multiple you will need to specify isArray: true in your service method in mycars.js. See example here: http://docs.angularjs.org/api/ngResource/service/$resource