Route Parameters Question ('/cards/:id')

Question

What I am curious about is the ":id" portion on this route parameter. It isn't explained in the video, or if it was, I completely missed it... but... why does ":id" refer to the index value of the card? Also, are there other predefined parameters like this that refer to aspects of JSON data or is this the only one? and if there are more where are they listed/explained in the express documentation?
Thanks for any assistance anyone provides in helping me understand this.

Henry Blandon · Accepted Answer

@Kyle Cameron (https://teamtreehouse.com/kylecameron), This is difficult to explain, but lets just simplify things a little. To access the question from the JSON file.
javascript
const prompt = cards[0].question;

The code above was changed to the one below, but the result is the same:
javascript
const text = cards[id][side]

So, when you pass the route in the url like http://localhost:3000/cards/0?side=question, express uses the property req.params to assign the value '0' to the variable ':id'.
Also express uses the property req.query to assign the value "question" to the variable "side".
In both examples above will return the question of the index 0 in the array of object stored in cards.
You can change the number to "1" and the query string to "answer" and it will return the answer of the object index 1 in the array, and so on.
Here is a link you can read more (http://expressjs.com/en/api.html#req.params). I also recommend watching the second video about "Route Parameters" again.

Lukas Schmid · Answer

ok I understand. 
I'll try to explain it bit more. 
Actually express does not know that we want to use the id from the URL as index. It is specified in the variables (const) below.
Just by having the ":id" in the route, express does not know what to do with that information. 
You just take this parameter and then tell express, to use it as an index. 
See the comments:
```
router.get('/:id', (req, res) => {
    const { side } = req.query;
    const { id } = req.params; // get the parameter "id" from the url and store it in the const called "id"
    const text = cards[id][side]; // here we point to the cards array and use the id from "const id" as index. 
    const { hint } = cards[id];
   res.render('card', {
....
...
```
So in other words, we are using the parameter ":id" and store the value in "const id = req.params.id" (or "const {id} = req.params" is the same).
Then we use the value from the "const id" and use it as index in cards. "cards[id]"
Back to your question:
Does adding a route parameter, regardless of what you name it, always reference the index values of the data held in the JSON file?
Answer: No, as long as you don't tell express to use it as index, it's not referring to any index.
And using the :id parameter as index is just in this example. It's nothing mandatory to do it this way. 
Did that answer your question? :)

Kyle Cameron · Answer

This doesn't entirely answer my question. What I was trying to get at is how does express inherently know that "/cards/:id" should reference the index values of each set of card data in the JSON file. Does adding a route parameter, regardless of what you name it, always reference the index values of the data held in the JSON file?

Lukas Schmid · Answer

Hi Kyle,   
They use the index value of the cards because there is no id property in the json file where they could refer to the id.   
Of course you can also point to the id if there is any.  
But in this case, they just use the index as the id.   
You can name the properties what you want.   
It would also work if you use e.g.  
:question  
:hint  
:username  
:age  
etc...  
But using id is more accurate to get unique data.   
Hope this answer helps :)

Welcome to the Treehouse Community

Looking to learn something new?

Kyle Cameron

Kyle Cameron

Route Parameters Question ('/cards/:id')

4 Answers

Henry Blandon

Henry Blandon

Lukas Schmid

Lukas Schmid

Lukas Schmid

Lukas Schmid

Kyle Cameron

Kyle Cameron

Brian Wright

Brian Wright