JavaScript Express Basics Parameters, Query Strings, and Modularizing Routes Randomize Cards

Brian Patterson
Brian Patterson
19,587 Points

Pretty sure his code is wrong!

I have pretty much copied his code letter by letter or rather copied and pasted it. When I hit the answer link it gives me a 404. This is the code I have. cards.js

const express = require('express');
const router = express.Router();
const { data } = require('../data/flashcardData.json');
const { cards } = data;

router.get('/:id', (req, res) => {
  const { side } = req.query;
  const { id } = req.params;
  const text = cards[id][side];
  const { hint } = cards[id];

  const templateData = { id, text };

  if (side === 'question') {
    templateData.hint = hint;
    templateData.sideToShow = 'answer';
    templateData.sideToShowDisplay = 'Answer';
  } else if (side === 'answer') {
    templateData.sideToShow = 'question';
    templateData.sideToShowDisplay = 'Question';

  res.render('card', templateData);

module.exports = router;

my card.pug file.

extends layout.pug

block content
    h2= text
    if hint
        i Hint: #{hint}
    a(href=`${id}?side=${sideToShow}`)= sideToShowDisplay

My app.js file

const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));

app.set('view engine', 'pug');

const mainRoutes = require('./routes');
const cardRoutes = require('./routes/cards');

app.use('/cards', cardRoutes);

app.use((req, res, next) => {
  const err = new Error('Not Found');
  err.status = 404;

app.use((err, req, res, next) => {
  res.locals.error = err;
  const status = err.status || 500;

app.listen(3000, () => {
  console.log('The application is running on localhost:3000!');


Neil McPartlin
Neil McPartlin
14,643 Points

Hi Brian. I have a working app based on Andrew's code. I switched my 3 files for your 3 and the app still works.

I read your conversation with Brian Anstett here...

... but you mention seeing ':id' twice in your 'answer' URL.

So have you solved this problem?

If not, when you visit this URL...


What do you see bottom left of your browser, when you rest your mouse over the Answer link.

I see...


Brian Patterson
Brian Patterson
19,587 Points

Thank you, Neil McPartlin, for your comment. I am not sure why it did not work. The only way I got it to work was to edit the card.pug file with the following anchor tag.

a(href=`/cards/${id}?side=${sideToShow}`)= sideToShowDisplay

So I am a bit mystified why this works and his code doesn't.

Neil McPartlin
Neil McPartlin
14,643 Points

Do I understand correctly that if you revert that single line of code back to Andrew's code, namely...

a(href=`${id}?side=${sideToShow}`)= sideToShowDisplay

Then save card.pug, restart the server, visit this specific URL...


When you rest your mouse over the Answer link and look bottom left of your browser, you see...


Brian Patterson
Brian Patterson
19,587 Points

Neil, I have put the following on the card.pug file.

a(href=`${id}?side=${sideToShow}`)= sideToShowDisplay

It seems to work now.

3 Answers

I have encountered the same problem as Brian. I'm guessing this is whats causing the issue:

Caution Previous versions of Pug/Jade supported an interpolation syntax such as:

a(href="/#{url}") Link

This syntax is no longer supported. Alternatives are found below. (Check our migration guide for more information on other incompatibilities between Pug v2 and previous versions.)

var url = 'pug-test.html';
a(href='/' + url) Link

The only way i got it to work is by doing this

a(href= id + '?side=' + sideToShow )= sideToDisplay
8,759 Points

Old Q&A but if you stumble across this trying to capitalize your first letter with minimal code this works:

router.get('/:id', (req, res) => {
  const { side } = req.query
  const { id } = req.params
  const text = cards[id][side]
  const { hint } = cards[id]

  const templateData = { id, text }

  if (side === 'question') {
    templateData.hint = hint
    templateData.sideToShow = 'answer'

  if (side === 'answer') templateData.sideToShow = 'question'

  res.render('card', templateData)


a(href=`/cards/${id}?side=${sideToShow}`)= `${sideToShow.charAt(0).toUpperCase()}${sideToShow.slice(1)}`