Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Using Data with Pug Templates!
You have completed Practice Using Data with Pug Templates!
Preview
This video covers one solution to the Pug templates challenge.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Hey, how did it go?
0:00
Hopefully you were able to complete
this challenge successfully.
0:01
The goal was to display each
recipe in the collection.
0:04
Then click to a page that displays
the individual recipe information.
0:07
Now I'll show you my solution which
you can compare it to what you wrote.
0:11
You can also reference all my code
when you download the project files.
0:14
Starting with routes index.js,
0:17
the file already has access to the recipe
JSON data via the variable recipes.
0:19
So in the root get method route,
0:24
I pass the recipes data to the index
dot pug template here in res.render.
0:27
Remember the first
argument passed to res or
0:33
response .render is the file
path of the view to render.
0:36
In this case, the index dot pug view.
0:40
And the second argument passed to the
method is a locals object whose properties
0:43
define the local variables for the view.
0:46
So I passed an object with
the recipes variable.
0:49
Below in the get method route for
an individual recipe I passed the single
0:52
recipe object returned by
recipes.find into the recipe view.
0:58
This time passing res.render, an object
that references the recipe variable.
1:03
Moving on to the file views
index.pug I used pugs each iterator
1:12
to iterate over the recipes in
the array passed to the view.
1:17
This instructs pug that for
each recipe in the recipes array,
1:22
it should render an anchor element
that's a parent of an h2 and an image.
1:28
When using each pug syntax requires
that you indent the code, like so,
1:34
in this case two spaces.
1:39
Next, I generated the href attribute
value for each anchor element
1:40
using the local variable and
recipe id properties passed into the view.
1:45
I used a template literal
to generate the href value.
1:50
You could have also used
string concatenation for this.
1:54
And I rendered the recipe name
as an h2 using the data passed
1:57
into the view with h2= recipe.recipe name.
2:02
Then to dynamically generate these
source attribute of each image,
2:06
I set the source path of the generated
image to reference the image
2:11
url property of the recipe
object with recipe.image url.
2:16
I also used string interpolation
to build the source string.
2:20
Finally, in the file views, recipe.pug,
I used the data passed to this
2:24
view to dynamically generate
the recipe name as an h1.
2:29
With h1 = recipe.recipe name.
2:33
Then I used string interpolation
to generate the source
2:36
attribute of the image.
2:40
Again, referencing recipe.image url.
2:41
After that, I displayed the recipe
description as paragraph text using
2:45
the description property
with p= recipe.description.
2:50
And similar to the index view,
I used an each iterator to render a recipe
2:55
list item for
each ingredient in recipe.ingredients or
3:00
each ingredient specified
in the ingredients array.
3:06
Then finally, like the ingredients,
I used an each iterator to dynamically
3:09
render a recipe step for
each step in recipe.steps.
3:14
So I hope that you were able to complete
this practice session successfully.
3:19
If not, why not start over and try it
again without looking at my version?
3:23
You're also going to learn more
about working with Express and
3:26
view engines as you progress through
our full stack JavaScript curriculum.
3:29
Thanks everyone, and happy learning.
3:33
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up