title: Location API not returning location id to server
body: <p>I'm following an tutorial where i am supposed to consume an mongoose API using express and display location information to the view. However I am getting an 404 error on the front end everytime i click the button that calls the API request. The source code for this tutorial can be found here. <a href="https://github.com/cliveharber/gettingMean-2/tree/chapter-07" rel="nofollow noreferrer">https://github.com/cliveharber/gettingMean-2/tree/chapter-07</a></p>
  <p>Here is the API request handler on the server side:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const getLocationInfo = (req, res, callback) =&gt; {
    const path = `/api/locations/${req.params.locationid}`;
    const requestOptions = {
      url: `${apiOptions.server}${path}`,
      method: 'GET',
      json: {}
    };
    request(
      requestOptions,
      (err, {statusCode}, body) =&gt; {
        const data = body;
        if (statusCode === 200) {
          data.coords = {
            lng: body.coords[0],
            lat: body.coords[1]
          }
          callback(req, res, data);
        } else {
          showError(req, res, statusCode);
        }
      }
    );
  };
  
  const locationInfo = (req, res) =&gt; {
    getLocationInfo(req, res,
      (req, res, responseData) =&gt; renderDetailPage(req, res, responseData)
    );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>The Render handler of the page i am trying to reach:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const renderDetailPage = (req, res, location) =&gt; {
    res.render('location-info',
      {
        title: location.name,
         pageHeader: {
          title: location.name,
        },
        sidebar: {
          context: 'is on Loc8r because it has accessible wifi and space to sit down with your laptop and get some work done.',
          callToAction: 'If you\'ve been and you like it - or if you don\'t - please leave a review to help other people just like you.'
        },
        location
      }
    );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>This is the Mongoose API controller that retrieves the location data from the database:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const locationsReadOne = (req, res) =&gt; {
    Loc
      .findById(req.params.locationid)
      .exec((err, location) =&gt; {
        if (!location) {
          return res
            .status(404)
            .json({
              "message": "location not found"
            });
        } else if (err) {
          return res
            .status(404)
            .json(err);
        }
        res 
          .status(200)
          .json(location);
      });
  };</code></pre>
  </div>
  </div>
  
  This is the express routing code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const express = require('express');
  const router = express.Router();
  const ctrlLocations = require('../controllers/locations');
  const ctrlOthers = require('../controllers/others');
  
  router.get('/', ctrlLocations.homelist);
  router.get('/locations/:location._id', ctrlLocations.locationInfo);</code></pre>
  </div>
  </div>
  </p>
  <p>And finally this is a snippet of the Pug code that contains the button which calls the get request to retrieve the location id:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>each location in locations
          .card
            .card-block
              h4
                a(href=`/locations/${location_id}`)= location.name
                +outputRating(location.rating)
                span.badge.badge-pill.badge-default.float-right= location.distance
              p.address= location.address
              .facilities
                each facility in location.facilities
                  span.badge.badge-warning= facility</code></pre>
  </div>
  </div>
  </p>
  <p>Let me know if i need to provide additional information. Appreciate any help.</p>