Flashcard template not working

Question

Have there been any breaking changes to Express.js since this course was released? I don't understand why, but my query strings are not working. I can open up the server but as soon as I try to type the URL with the query string it crashes the app.

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

_http_outgoing.js:491
    throw new Error('Can\'t set headers after they are sent.');
    ^

Error: Can't set headers after they are sent.
    at validateHeader (_http_outgoing.js:491:11)
    at ServerResponse.setHeader (_http_outgoing.js:498:3)
    at Array.write (C:\xampp\htdocs\jgdm-100daysofcode\nodejs\express_site\node_modules\finalhandler\index.js:285:9)
    at listener (C:\xampp\htdocs\jgdm-100daysofcode\nodejs\express_site\node_modules\on-finished\index.js:169:15)
    at onFinish (C:\xampp\htdocs\jgdm-100daysofcode\nodejs\express_site\node_modules\on-finished\index.js:100:5)
    at callback (C:\xampp\htdocs\jgdm-100daysofcode\nodejs\express_site\node_modules\ee-first\index.js:55:10)
    at IncomingMessage.onevent (C:\xampp\htdocs\jgdm-100daysofcode\nodejs\express_site\node_modules\ee-first\index.js:93:5)
    at emitNone (events.js:106:13)
    at IncomingMessage.emit (events.js:208:7)
    at endReadableNT (_stream_readable.js:1064:12)

Code as below.

card.pug

extends layout.pug

block content
    h1 Flash Cards

    section#content
        h2= text

        if hint
            p 
                i Hint: #{hint}
        else
            p
                i Hint: (No Hint available)

app.js

const express = require('express');

//import body-parser middleware
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");



//Express launch function
const app = express();
//set the view engine to use pug for templating
app.set("view engine", "pug");


//use bodyParser and cookieParser middleware - third party.
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser());

const indexRouter = require("./routes");
const cardsRouter = require("./routes/cards");

app.use(indexRouter);
app.use('/cards', cardsRouter);

/*MIDDLEWARE*/

/* app.use((req, res, next) => {
    console.log("Hello");
    next();
 });

 app.use((req, res, next) => {
    console.log(", World");
    next();
 }); */

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

//error handler middleware
app.use((err, req, res, next) => {
    // do something
    //res.status(err.status)   
    res.locals.error = err;
    res.status(err.status);
    res.render('error');
    next();
    //res.end();

 });

//Set up the development server listen method - port number
app.listen(3000, function(){
    console.log("server currently running on Heroku");

});

index.js

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

//list data
const names = [
    "Jack Bauer",
    "Jill Green",
    "John Joe",
    "Jonah Whale",
    "Jamaal LH",
    "Joe Fisher"
]


/*ROUTES*/

//serve the home route
routes.get('/', (req, res) => {

    const name = req.cookies.username;

    //basic response with the send method
    if(name) {        
        res.render('index', {name, page_title: "Flash Card App"});
    } else {
        res.redirect('/hello');
    }
     //res.end();
 });

//serve the register route
routes.get('/register', (req, res) => {

    //basic response with the send method
    res.render('register', {page_title: "Flash Card App: Register of users", names});
    //res.end();

 });

//serve the 4th route which will be a post route 
routes.get('/hello', (req, res) => {

    //store cookie
    const name = req.cookies.username;

    //perform actions based on setting of cookie
    if(name) {
        res.redirect('/');
    } else {
        res.render('hello', { page_title: "Flash Card App: Hello Route"});
    }

    //res.end();

 });

 routes.post('/hello', (req, res) => {

    const name = req.body.username;

    //basic response with the send method,
    res.cookie('username', name);
    res.redirect('/');

    //console.log(req.body);
    //res.end();

 });

 routes.post('/goodbye', (req, res) => {

    //res.clearCookie(req.cookies.username);
    res.clearCookie('username');
    res.redirect('/hello');
 });

 //export index routes to app.js
 module.exports = routes;

cards.js

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

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

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

   const templateData = { text, hint };
   res.render('card', templateData);
});


 //export cards routes to app.js
 module.exports = routes;

Answer 1 · 2020-02-13T18:41:51Z

February 13, 2020 6:41pm

So i ran it and this worked for just getting the id, text, and hint rendered dynamically with no errors.

routes.get("/:id", (req, res) => {
  const { side } = req.query;
  const { id } = req.params;

  let text = "";
  let hint;

  if (side === "question") {
    text = cards[id].question;
    hint = cards[id].hint;
  } else {
    text = cards[id].answer;
  }

  const templateData = {
    id,
    hint,
    text
  };

  res.render("cards", templateData);
});

but the middleware has to change to

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

I kinda gutted that route but now you can add the the display values in the dataTemplate. I typed in answer as the query and that also worked. It was a weird middleware glitch that couldn't inject the id. Weird..

Answer 2 · 2020-02-13T21:37:40Z

February 13, 2020 9:37pm

That's funny I was wondering why I was getting 0 and style.css when I tried to log the id. Was confusing. Either way it worked!

Welcome to the Treehouse Community

Looking to learn something new?

Jonathan Grieve

Jonathan Grieve

Flashcard template not working

Blake Larson

Blake Larson

Jonathan Grieve

Jonathan Grieve

Blake Larson

Blake Larson

Jonathan Grieve

Jonathan Grieve

Jonathan Grieve

Jonathan Grieve

Sean T. Unwin

Sean T. Unwin

Jonathan Grieve

Jonathan Grieve

Blake Larson

Blake Larson

Jonathan Grieve

Jonathan Grieve

Blake Larson

Blake Larson

Sean T. Unwin

Sean T. Unwin

Jonathan Grieve

Jonathan Grieve

Blake Larson

Blake Larson

2 Answers

Blake Larson

Blake Larson

Sean T. Unwin

Sean T. Unwin

Jonathan Grieve

Jonathan Grieve

Blake Larson

Blake Larson

Jonathan Grieve

Jonathan Grieve