ccates1 ccates1 - 7 months ago 23
Javascript Question

How to save radio button selections (each with a string value) to an array of strings within a specific mongoose model?

I am using an angular form and I want to retrieve each of the radio button selections in order to save those selections to an instance of my Picks.js mongoose model. I know I have the correct setup in terms of the Angular form and Node(Express) server, because the user._id and contest._id is saved within the mongodb database, but the selectedTeams array is saved as an empty one (selectedTeams: [ ]). I have researched for a long time through google and really cannot find anything specific as a solution for my issue. Any advise or answers would be much appreciated.

Controller



function submitPicks() {
$scope.buttonDisabled = true;
$scope.hasMadePicks = true;
contestService.participate(contest);
angular.forEach($scope.contest.matchups, function(matchup) {
$scope.selectedTeams.push(matchup.selectedTeam);
});
contestService.createEntry(contest._id, {
user: authService.currentUserId(),
selectedTeams: $scope.selectedTeams
})
}


Service



function createEntry(id, pick) {
return $http.post("/contests/" + id + "/picks", pick, {
headers: {
Authorization: "Bearer " + authService.getToken()
}
});
}


Router



router.route("/contests/:contest/picks")
.post(auth, function(req, res, next) {
var pick = new Pick();
pick.contest = req.contest;
pick.save(function(err, pick) {
if(err) {
return next(err);
}
req.contest.picks.push(pick);
req.contest.save(function(err, contest) {
if(err) {
return next(err);
}
Pick.populate(pick, {
path: "user",
select: "username"
}).then(function(pick) {
res.json(pick);
});
})
})
});


HTML



{{contest.participants}}
{{contest.usersWhoJoined}}
<form name="contestForm" ng-submit="submitPicks()">
<table id="nbateams">
<tr>
<th>Home Team</th>
<th>Away Team</th>
<th>Selected Team</th>
<th>Winning Team</th>
</tr>
<tr ng-repeat="matchup in contest.matchups">
<td>
<input type="radio" name="matchup{{matchup.matchupId}}" ng-model="matchup.selectedTeam" ng-value="matchup.homeTeam">
<img ng-src="{{matchup.homeLogo}}">
<br>
{{matchup.homeTeam}}
</td>
<td>
<input type="radio" name="matchup{{matchup.matchupId}}" ng-model="matchup.selectedTeam" ng-value="matchup.awayTeam">
<img ng-src="{{matchup.awayLogo}}">
<br>
{{matchup.awayTeam}}</td>
<td>{{matchup.selectedTeam}}</td>
<td>{{matchup.winningTeam}}</td>
</tr>
</table>
<button type="submit" ng-show="!hasMadePicks" ng-disabled= "buttonDisabled" class="btn btn-success">Submit Picks</button>
</form>
{{selectedTeams}}


The correct string values representing each of the radio buttons values is displayed properly within the {{selectedTeams}}, I just cant get that added to the pick.selectedTeams variable within the Pick model. Here is the schema of the Pick model I keep reffering to:

var mongoose = require("mongoose");

var PickSchema = new mongoose.Schema({
contest: {
type: mongoose.Schema.Types.ObjectId,
ref: "Contest"
},
selectedTeams: [String],
user: {
type: mongoose.Schema.Types.ObjectId,
ref: "User"
}
});
module.exports = mongoose.model('Pick', PickSchema);

Answer

Figured I would provide an update on this just in case someone is dealt with the same issue sometime in the future. To get the radio button selections saved within Mongodb, I made the following adjustment to the contestController:

contestService.createEntry(contest._id, {
  contest: $scope.contest,
  user: authService.currentUserId(),
  selectedTeams: $scope.selectedTeams
)}.success(function(pick) {
  $scope.contest.picks.push(pick);
});
}

And inside of the contests route:

router.route("/contests/:contest/picks")
.post(auth, function(req, res, next) {
  var pick = new Pick(req.body);
  pick.contestPoints = 0;

  pick.save(function(err, pick) {
    if(err) {
      return next(err);
    }
    req.contest.picks.push(pick);
    req.contest.save(function(err, contest) {
      if(err) {
        return next(err);
      }

      Pick.populate(pick, {
        path: "user",
        select: "username"
      }).then(function(pick) {
        res.json(pick);
      });
    })
  })
});