CODEWITHSUNDEEP
ajaxangularjsnode.jsmongodbmeanjs
T94j0
T94j0

Reputation: 87

MEAN stack ajax POST Error: TypeError: Cannot read property 'userName' of undefined

So, here's some background: I am working on a MEAN stack app for my school where we can read and post our Galaga and Dig Dig highscores to a mongo database.

I am getting an error:

server.js:37 is:

app.post("/api/scores", function(req, res){
    Score.create({
        name:res.body.userName,
        game:res.body.game,
        points:res.body.userPoints
    });
});

The index.html that the res.body.* is coming from is: 

<!DOCTYPE html>
<html ng-app="nameOfApp">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
        <script src="core.js"></script>
    </head>
      <body ng-controller="mainController">
        <div class="container">
        <div class="jumbotron text-center">
            <div class="container">
              <h1>HelpDesk Gaming Leaderboard</h1>
            </div>
        </div>
      <div class="container">
        <table>
          <tr>
            <td><b>Name</b></td>
            <td><b>Score</b></td>
          </tr>
          <tr ng-repeat="score in scores">
            <td>{{score.name}}</td>
            <td>{{score.points}}</td>
          </tr>
        </table>
        </div>
      <br/>
      <h2>Score?</h2>
      <form>
      <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>
    </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
    </script>

  </body>
</html>

and the core.js, which is the angular piece is:

var nameOfApp= angular.module('nameOfApp', []);

nameOfApp.controller("mainController", ["$scope", "$http", function($scope, $http) {
                $scope.formData = {};



                // when landing on the page, get all scores and show them
                $http.get('/api/scores')
                    .success(function(data) {
                        $scope.scores = data;
                        console.log(data);
                    })
                    .error(function(data) {
                        console.log('Error: ' + data);
                    });
                $scope.createScore = function() {
                    $http.post('/api/scores', $scope.formData)
                        .success(function(data) {
                            $scope.formData = {};
                            $scope.scores = data;
                            console.log(data);
                        })
                        .error(function(data) {
                            console.log('Error: ' + data);
                        });
                };

}]);

Thanks for your input, and if there are any stylistic things that I have wrong, I would love to hear them. I am trying to get better at MEAN stack development.

Upvotes: 0

Views: 903

Answers (1)

Brant
Brant

Reputation: 1788

It's not res.body.* you want to use in your Score.create method, you want to be using req.body.*. 'req' is what has all the data from your http request. Should be:

app.post("/api/scores", function(req, res){
    Score.create({
        name:req.body.userName,
        game:req.body.game,
        points:req.body.userPoints
    });
});

Upvotes: 2

Related Questions