Get Id for item in EJS template and inject into service

Question

I am trying to figure out how to pass an Id into my PlayerDetailController and then use it in my service.

I have the following route in my main app.js:

var players = require('./routes/players');
app.use('/players', players);

And I have the following routes inside of the players route (routes/players.js):

var express = require('express');
var router = express.Router();

/* GET /players listing. */
router.get('/', function(req, res, next) {
    res.render('players', { title: 'Players', action: 'list'});
});

/* GET /player details. */
router.get('/:id', function(req, res, next) {
    res.render('players', { title: 'Player Details', action: 'details'});
});

module.exports = router;

And the following in my main players.ejs template:

<!-- other layout elements -->
<% if (action === 'details') { %>
    <% include partials/players/details %>
<% } else if (action === 'update') { %>
    <% include partials/players/update %>
<% } else if (action === 'remove') { %>
    <% include partials/players/remove %>
<% } else { %>
    <% include partials/players/list %>
<% } %>
<!-- other layout elements -->

And my deatils.ejs partial:

<div ng-controller="PlayerDetailsController">
    <div class="playerDetails">
        <p>
            <strong>{{ player.name}} - {{ player.position }} - {{ player.team }}</strong><br/>
            Touchdowns: {{ player.touchdowns }}<br/>
            Yards: {{ player.yards }}
        </p>
    </div>
</div>

And my PlayerDetiails service:

// PlayerDetails Service
app.factory('PlayerDetails', ['$http', function($http){
    // below is where I'm trying to inject the Id
    return $http.get('/api/player/:id');
}]);

But I have no idea how I can pass the Id that shows up in my route (ex. http://localhost:3000/players/550130d32f3345bc065f2ecf) into my controller so that my controller calls and receives the correct player data. How would I do this? I thought I could add a id property to the res.render call, but I'm not sure what I would do with it in the EJS template. Any help would be greatly appreciated!

Answer 1

The ID passed to the route will be available in req.params.id. You can retrieve the player from the database using the ID and pass the object to the view.

Something like this, using Mongoose ODM. If you are using another database/ODM/ORM the code will be different but the idea is the same:

/* GET /player details. */
router.get('/:id', function(req, res, next) {
    Player.find({ _id: req.params.id }, function(err, player) {
        if(err) return next(err);
        res.render('players', { title: 'Player Details', action: 'details', player: player });
    });
});

Then you will have access to the Player document via player attribute.

If you want to create an API that will return all the player data in JSON format, you can do it like this:

/* GET /api/player/:id */
router.get('/:id', function(req, res, next) {
    Player.find({ _id: req.params.id }, function(err, player) {
        if(err) return next(err);
        res.json(player);
    });
});

Answer 2

Pass the id to your template:

router.get('/:id', function(req, res, next) {
    res.render('players', { title: 'Player Details', action: 'details', id: req.params.id});
});

ng-init receives the id:

<div ng-controller="PlayerDetailsController" ng-init="id = <%= id %>">

PlayerDetails service:

app.service('PlayerDetails', ['$http', function($http){
    return {
         get: function(id) {
           return $http({
            url: '/api/player/:id',
            params: {id: id},
            method: 'GET'
           });
         }
    };
}]);

Somewhere in PlayerDetailsController:

// id is from ng-init
PlayerDetails.get($scope.id).success(function(player) {
   $scope.player = player;
}).error(function(error) {
   console.error(error);
});