Preview
Video Player
00:00
00:00
One Solution
3:35This video covers one solution to the Pug templates challenge.
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