Get 404 Not Found with PUT request in MEAN app - angularjs

Question

I have an Edit button on my event-detail page that goes to a new page where user can update the current selected event. I have no trouble using GET to get single/all events and POST to create new event. But I'm stuck on updating existing event and constantly get 404 error: PUT http://localhost:3000/api/events 404 (Not Found)
On my server route I have:
//return event-details
app.get('/api/events/:id', events.getEventById);
//update event
app.put('/api/events/:id', events.updateCurrentEvent);
Server side event controller:
exports.updateCurrentEvent = function(req, res) {
Event.findById(req.params.id, req.body, function(err, event) {
var event = req.body;
if(!event) {
res.statusCode = 404;
res.send({ error: 'Not found'});
}
event.title = req.body.title;
event.desc = req.body.desc;
event.date = req.body.date;
event.duration = req.body.duration;
event.address = req.body.address;
event.city = req.body.city;
event.state = req.body.state;
event.save(function (err) {
if (!err) {
log.info("event updated");
res.send({ status: 'OK', event:event });
} else {
if(err.name == 'ValidationError') {
res.statusCode = 400;
res.send({ error: 'Validation error' });
} else {
res.statusCode = 500;
res.send({ error: 'Server error' });
}
log.error('Internal error(%d): %s',res.statusCode,err.message);
}
});
});
My $resource service:
app.factory('mvEvent', function($resource) {
var EventResource = $resource('/api/events/:_id', {_id: "#id"}, {
update: {method:'PUT', isArray:false}
});
return EventResource;
});
my client-side controller:
angular.module('app').controller('mvUpdateEventCtrl', function($scope, $routeParams, $location, mvEvent) {
$scope.event = mvEvent.get({_id:$routeParams.id})
.$promise
.then(function(event) {
$scope.event = event;
console.log($scope.event);
$scope.title =$scope.event.title;
$scope.desc = $scope.event.desc;
$scope.date = $scope.event.date;
$scope.duration = $scope.event.duration;
$scope.address = $scope.event.address;
$scope.city = $scope.event.city;
$scope.state = $scope.event.state;
});
$scope.updateEvent = function() {
$scope.event.$update(function() {
}, function(error) {
$scope.error = error.data.message;
});
}
});
My client side routes:
var app = angular.module('app', ['ngResource', 'ngRoute', 'ui.bootstrap']);
app.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
//events route
.when('/events', {
templateUrl: '/partials/events/event-list',
controller: 'mvEventListCtrl'
})
//events detail route
.when('/events/:id', {
templateUrl: '/partials/events/event-details',
controller: 'mvEventDetailsCtrl'
})
//update event route
.when('/events/:id/update', {
templateUrl: '/partials/admin/event-update',
controller: 'mvUpdateEventCtrl'
})
});
Getting the event details showing in the each text field is as far as I can get. As soon as I hit 'Update event' Button I get 404 error and it seems to lie somewhere in my server side code. I've seen quite a bit of different approaches implementing PUT request, with or without routeParams, using findById then save or findByIdAndUpdate. I'm wondering if there is a standard way to do this. Thanks in advance!!

Answer 1

Remove the line var event = req.body; from your server side controller. Firstly, it is not required. Secondly, it is same as the name of the document returned by Event.findById callback, and that's getting overridden by the variable declaration.
exports.updateCurrentEvent = function(req, res) {
Event.findById(req.params.id, req.body, function(err, event) {
var event = req.body; // <<==== Remove this line
if(!event) {
res.statusCode = 404;
res.send({ error: 'Not found'});
}
event.title = req.body.title;
event.desc = req.body.desc;
event.date = req.body.date;
event.duration = req.body.duration;
event.address = req.body.address;
event.city = req.body.city;
event.state = req.body.state;
event.save(function (err) {
if (!err) {
log.info("event updated");
res.send({ status: 'OK', event:event });
} else {
if(err.name == 'ValidationError') {
res.statusCode = 400;
res.send({ error: 'Validation error' });
} else {
res.statusCode = 500;
res.send({ error: 'Server error' });
}
log.error('Internal error(%d): %s',res.statusCode,err.message);
}
});
});
}