MEAN stack database issue with angular - node.js

Question

When I add an item to my database it just shows the id was added but the name attribute I chose for the item was not added: Meaning - The 'name' attribute I add to the 'player' is not persisted when I save it. Can someone please tell me why? I think it's an issue with string conversion but I am not sure.
*I am able to update the item's name using POSTMAN's PUT option.
Using the x-www-form-urlencoded option, I can update my item's name with a plain string.
So do I need to simply do some sort of string conversion or is something else wrong with my code? And please let me know if you need me to provide more code. Thanks!
Here's my code:
browser control - network:
Yes - (and I only add a name attribute)
When I add the name attribute it is not saved - yet an item is still created. That is the problem.
browser console - network tab:
Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/api/players
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,he;q=0.6
Connection:keep-alive
Content-Length:18
Content-Type:application/json;charset=UTF-8
Cookie:connect.sid=s%3AX2FaOplCDPU3qDaM7vVQPb5vFo_ievn1.zFM%2FKNj2QN5eDspCFOJEE2fYwXiTyUnN90sR8oTfnpI
Host:localhost:3000
Origin:http://localhost:3000
Referer:http://localhost:3000/add
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Request Payloadview source
{showName:Jay}
showName: "Jay"
Response Headersview source
Connection:keep-alive
Content-Length:29
Content-Type:application/json
Date:Sun, 06 Jul 2014 06:13:25 GMT
X-Powered-By:Express
Here's code of the route: server side. maybe there's an error here:
.post(function(req, res) {
var player = new Player(); // create a new instance of the Player model
player.name = req.body.name; // set the player name (comes from the request)
player.sport = req.body.sport;
player.league = req.body.league;
player.team = req.body.team;
player.age = req.body.age;
player.description = req.body.description;
// save the player and check for errors
player.save(function(err) {
if (err)
res.send(err);
res.json({ message: 'Player created!' });
});
})
.get(function(req, res) {
Player.find(function(err, players) {
if (err)
res.send(err);
res.json(players);
});
});
controller: add.js
angular.module('MyApp')
.controller('AddCtrl', ['$scope', '$alert', 'Player', function($scope, $alert, Player) {
$scope.addShow = function() {
Player.save({ showName: $scope.showName },
function() {
$scope.showName = '';
$scope.addForm.$setPristine();
$alert({
content: 'Player has been added.',
placement: 'top-right',
type: 'success',
duration: 3
});
},
function(response) {
$scope.showName = '';
$scope.addForm.$setPristine();
$alert({
content: response.data.message,
placement: 'top-right',
type: 'danger',
duration: 3
});
});
};
}]);
template: add.html
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Add Sports Player</div>
<div class="panel-body">
<form class="form" method="post" ng-submit="addShow()" name="addForm">
<div class="form-group" ng-class="{ 'has-success' : addForm.showName.$valid && addForm.showName.$dirty, 'has-error' : addForm.showName.$invalid && addForm.showName.$dirty }">
<input class="form-control" type="text" name="showName" ng-model="showName" placeholder="Enter TV show name" required autofocus>
<div class="help-block text-danger" ng-if="addForm.showName.$dirty" ng-messages="addForm.showName.$error">
<div ng-message="required">Sports Player's name is required.</div>
</div>
</div>
<button class="btn btn-primary" type="submit" ng-disabled="addForm.$invalid">Add</button>
</form>
</div>
</div>
service: player.js
angular.module('MyApp')
.factory('Player', ['$resource', function($resource) {
return $resource('/api/players/:_id');
}]);

Answer 1

From what I can tell, you are making a POST HTTP request to /api/players:
Request URL:http://localhost:3000/api/players
Request Method:POST
However, you're only sending showName:
Request Payloadview source
{showName:Jay}
showName: "Jay"
But on the server side, you are not looking for showName, and instead looking name, sport, league, etc:
var player = new Player(); // create a new instance of the Player model
player.name = req.body.name; // set the player name (comes from the request)
player.sport = req.body.sport;
player.league = req.body.league;
player.team = req.body.team;
player.age = req.body.age;
player.description = req.body.description;
If you want to store name, then you'll need to send over name instead of showName. If you want to store showName, then you'll need to pull it from the request body (req.body.showName). So either send over all those attributes from the client side to the server side, or change the server side to accept only showName for a Player.
Hopefully that makes sense? There's just a disconnect from what you're sending on the client side to what you're looking for on the server side. It's also a bit confusing that it looks like on the client side you're dealing with a TV show, and on the server side its some player for a sport team?