Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics Parameters, Query Strings, and Modularizing Routes Card Template

Gerry K
Gerry K
5,877 Points
Posted by Gerry K
Gerry K
5,877 Points

Need clarifying of this set of code

The code is below and corresponds with this video. Not sure what is happening here as the video just skimmed over it. The variable side (what is contained in this variable?) Could someone also kindly break down what this code is doing step by step.

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

Thank you!

3 Answers

miikis
miikis
44,957 Points

Hi Gerry,

So that route is only used when the URL looks like this: "www.flashcards.com/cards/1232". The 1232 in that URL is just a random number that — ideally — corresponds to the index of the particular card object, from the cards array in flashcardData.json. Also, that URL can indicate that it wants a question or an answer by looking like this: "www.flashcards.com/cards/1232?side=answer."

So, this is what would happen inside that function whenever the client requests "www.flashcards.com/cards/1232?side=answer."

router.get('/:id', (req, res) => {
    // Here, we're setting either the string "answer" or the string "question" to a variable called side
    const side = req.query.side; // "answer"
    // Here, we're setting the index of the client's desired "card" to a variable called id
    const id = req.params.id; // 1232
    // This step has two parts: we're getting the specific "card" from the "cards" array using the id variable as an index number
    // Then, once we have a "card" object, we're grabbing the string of text inside of its "answer" property and assigning it to the variable "text"
    // We get the string of text inside of "answer" — instead of "question" — because that's what the value of "side" above happens to be
    const text = cards[id][side];
    // Similarily, "hint" will contain the the string of text inside of the "hint" property of the the selected "card" object
    const hint = cards[id].hint;
    // This step is really for readability and is arguably unnecessary
    // Basically, you're setting "templateData" with {text: "Something, something, answer", hint: "hint for the question"}
    const templateData = { text, hint };
    // Finally, we build our card.pug template using the contents of templateData, and send the resulting HTML to the client
    res.render('card', templateData);
});

Hope that helps :)

Gerry K
Gerry K
5,877 Points
Gerry K
Gerry K
5,877 Points

Thank you for explaining this!

Julio Soto
Julio Soto
4,544 Points
Julio Soto
Julio Soto
4,544 Points

the variable side contains what came in the request data. req is the incoming request and it has a body with a data object. to get that data you must use req.query the assigment is var side = req.query.side