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 trialGerry K
5,877 PointsNeed 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
44,957 PointsHi 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 :)
Ole Petter Baugerød Stokke
Full Stack JavaScript Techdegree Graduate 16,988 PointsThank you so much, Treehouse really did a terrible job at explaining this. The whole {variable} thing is really hard to get for us noobs.
Julio Soto
4,544 Pointsthe 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
Gerry K
5,877 PointsGerry K
5,877 PointsThank you for explaining this!
Jimmy Crandall
23,120 PointsJimmy Crandall
23,120 PointsExcellent explanation!