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

Brian Patterson
Brian Patterson
19,585 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
  section#content
    h2= text
    if hint
      p
        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.use(cookieParser());

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

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

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

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

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

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

PLEASE CAN SOMEONE HELP AS THIS IS DRIVING NUTS!

Neil McPartlin
Neil McPartlin
14,635 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...

https://teamtreehouse.com/community/getting-a-404-when-i-click-the-answer-link

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

So have you solved this problem?

If not, when you visit this URL...

http://localhost:3000/cards/1?side=question

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

I see...

http://localhost:3000/cards/1?side=answer

Brian Patterson
Brian Patterson
19,585 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,635 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...

http://localhost:3000/cards/1?side=question

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

http://localhost:3000/cards/1/1?side=answer

Brian Patterson
Brian Patterson
19,585 Points

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

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

It seems to work now.

2 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
Oussama AIT BAZIZ
Oussama AIT BAZIZ
Full Stack JavaScript Techdegree Student 11,491 Points

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

a(href= id + '?side=' + sideToShow )= sideToDisplay