1

I am making an app with the MEAN stack and I am having trouble POSTing data to my database. When I push the submit button, the form data is being cleared, like it is supposed to when the POST is sucessful, but when I go to the database, there is a new document with nothing in it but and id and __v.

There aren't any errors that are being thrown because there is data being posted to the DB, but not the correct data (Look at the mongodb document at the bottom of the page)

The form where the data is being posted to is this:

<input name="userName" type="String" class="form-control" id="userName" ng-model="formData.userName" placeholder="Your Name">
      <input name="game" type="String" class="form-control" id="game" ng-model="formData.game" placeholder="The game?">
      <input name="userPoint" type="Number" class="form-control" id="userPoint" ng-model="formData.userPoint" placeholder="Points?">
      <button type="submit" class="btn btn-default" ng-click="createScore()">Submit</button>

This is createScore():

$http.post('/api/scores', $scope.formData)
                        .success(function(data) {
                            $scope.formData = {};
                            $scope.scores = data;
                            console.log(data);
                        })
                        .error(function(data) {
                            console.log('Error: ' + data);
                        });

This is the Mongoose model for the database:

var Score = mongoose.model("Score", {
    userName: String,
    game: String,
    userPoint: Number
}, "score");

And this is the route for my express's "app.post()":

app.post("/api/scores", function(req, res){
    Score.create({
        userName:req.body.userName,
        game:req.body.game,
        userPoint:req.body.userPoint
    }, function(err, score) {
            if (err)
                res.send(err);

            Score.find(function(err, score) {
                if (err)
                    res.send(err)
                res.json(score);
            });
        });
});

When the data is POSTed, the mongodb file document looks like this:

{
    "_id": {
        "$oid": "54cbf3d1fbaaf10300000001"
    },
    "__v": 0
}

I was thinking that maybe the names were wrong (ex. userPoints and userPoint), but I made sue that they were all the same. Also, I'm new to this, so if you have any tutorials that might help concrete a topic, please feel free to share.

EDIT 1:
I did a console.log() on the node.js part where it says req.body.userName, req.body.game, etc. And in the logs, they all came out as undefined. I have been looking for a solution online, but I can't seem to find a solution. I have tried making the types in the HTML file "String" instead of "text", but that did not seem to work. Any ideas?

T94j0
  • 87
  • 10
  • Why do you do `Score.find` in the `create` callback? – Vsevolod Goloviznin Jan 30 '15 at 21:44
  • Because when I add a new score, I want it to refresh automatically instead of the user refreshing the page to see the results. – T94j0 Jan 31 '15 at 17:52
  • I think his point was that the find returns you the same object from the `create` callback. Instead of `Score.find` you could just `res.json(score)`. Also, have you printed `req.body`? If your properties are undefined you might not have the object structure you think you have. – Tony Jan 31 '15 at 18:03
  • Ok, that makes more sense now. What about the object structure, because I have everything named the same. userName, game, and userPoint are named correctly in everything (I think :)). Could you please go a little deeper into detail about that? Thanks!! – T94j0 Jan 31 '15 at 18:12

1 Answers1

0

Ok, so I fixed my problem.

I was trying to POST as a form-data instead of a x-www-form-urlencoded.

In my core.js, I put this in the createScore method:

$http({
            method  : 'POST',
            url     : '/api/scores',
            data    : $.param($scope.formData), 
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).success(function(response){
            $scope.formData = {};
            $scope.scores = response;
            console.log(response);
        });

I hope this helps someone!

T94j0
  • 87
  • 10