JavaScript Express Basics Parameters, Query Strings, and Modularizing Routes Using Data and Route Parameters

Sean Flanagan
Sean Flanagan
33,218 Points

Cannot GET /cards

Hi. This is what I get when I try to run my /cards page.

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((err, req, res, next) => {
  res.locals.error = err;
  res.status(err.status);
  res.render("error", err);
});

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

My cards.js:

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

router.get("/:id", (req, res) => {
  res.render("card", {
    prompt: cards[req.params.id].question,
    hint: cards[req.params.id].hint
  });
});

module.exports = router;

My index.js:

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  const name = req.cookies.username;
  if (name) {
    res.render("index", {name});
  } else {
    res.redirect("/hello");
  }
  res.render("index", {name: name});
});

router.get("/hello", (req, res) => {
  const name = req.cookies.username;
  if (name) {
    res.redirect("/");
  } else {
    res.render("hello");
  }
});

router.post("/hello", (req, res) => {
  res.cookie("username", req.body.username);
  res.redirect("/");
});

router.post("/goodbye", (req, res) => {
  res.clearCookie("username");
  res.redirect("/hello");
});

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

module.exports = router;

My flashcardData.json:

{
    "data": {
        "title": "JavaScript Flashcards",
        "cards": [
            {
                "question": "What language are Express apps written in?",
                "hint": "It starts with a \"J\"",
                "answer": "JavaScript"
            },
            {
                "question": "What is one way a website can store data in a user's browser?",
                "hint": "They are delicious with milk",
                "answer": "Cookies"
            },
            {
                "question": "What is a common way to shorten the response object's name inside middleware?",
                "hint": "It has the same abbreviation as \"resolution\"",
                "answer": "res"
            },
            {
                "question": "How many different values can booleans have?",
                "hint": "Think: binary",
                "answer": "2"
            },
            {
                "question": "Which HTML element can contain JavaScript?",
                "hint": "It starts with an \"s\"",
                "answer": "<script>"
            }
        ]
    }
}

Can anyone please tell me where I've gone wrong? Cheers!

4 Answers

Natalie Cluer
Natalie Cluer
18,884 Points

yep! :id is just a placeholder for the actual id number of the card

Natalie Cluer
Natalie Cluer
18,884 Points

Hi Sean! I think the problem is that your card route is set up to answer a get request to cards/:id, not cards/.

Sean Flanagan
Sean Flanagan
33,218 Points

Hi Natalie! I think I can see where you're going with this. I tried cards/0 and the question and hint appeared, then when I did cards/1, the question and hint for that card appeared. So I don't type in cards/, followed not by :id literally, but by the id number?

Sean Flanagan
Sean Flanagan
33,218 Points

I get it now. Thanks again!