It's great that we can output single values,
but actually on this restaurants page,
I wanna output a real list of restaurants.
So in the end, I wanna repeat, you could say,
this list item here with the restaurant data
for every restaurant that I have stored in my array.
And EJS also makes that very easy.
EJS has built-in support for common tasks like this,
and hence, it's a breeze to actually achieve this.
The great thing about EJS is that you can
output simple values like this,
but you can also use a slightly different syntax
to write your own JavaScript logic inside of this EJS file.
And that means that we'll have a way
of writing our own logic for looping
through all the restaurants
and repeating this list item for every restaurant.
Because we can do the same thing here in this EJS template,
as we would to do in a regular JavaScript file,
if we want to go through all the items in an array
and then do something with every item.
We can write a loop.
So in restaurants EJS, inside of this unordered list,
we in the end wanna loop though all the restaurants
and then create one list item for every restaurant.
The special EJS syntax we need here is again,
smaller than percentage sign,
but now without the equal sign.
And we also need the
closing percentage sign greater than sign here.
And then between those two tags here in the end,
which are only understood by EJS,
we can write JavaScript code.
For example here, we can now write a for-loop
and we can loop through our different restaurants.
So here I can create a constant restaurant
of restaurants, let's say.
We'll have to make sure that restaurants is provided
as a variable to the template later.
And we then have our opening curly brace,
just the opening curly brace, not the closing curly brace.
And then we can put the HTML code
between those curly braces.
And then once we're done after this list item,
we again have smaller than percentage sign,
percentage sign greater than,
and then the closing curly brace.
So that if I fold this list item for the moment
we in the end have almost some JavaScript code here.
I mean, it is JavaScript code,
but mixed into this HTML code.
And the code here, this HTML code, will be repeated.
This might be weird or difficult to wrap your head around,
but in the end,
it's just like writing Java script code
where you now can also repeat some HTML logic.
And it's very common to do something like this,
to repeat HTML content with a for-loop in EJS templates,
because it turns out that on a lot of websites,
you wanna output some lists of data.
I'll also indent this here,
even though it's technically not required,
but to make it really clear
that this belongs to this for-loop.
And now we can use this restaurant constant,
which we create here inside of that for-loop,
just as it is the case in standard JavaScript.
There, you can also use that constant
that is created in the for-loop inside of the for-loop.
Here it's the same, even though this is HTML code,
and to refer to output the restaurant title
we can now again use smaller than percentage equals
and then the closing tag to output restaurant.name.
Now I'm using the equals EJS syntax again, as I did up here,
because here I now wanna output a single value again.
The name of the restaurant.
And I'm using restaurant.name
because restaurant is my constant here.
And I know that restaurants will be an array full of objects
because in restaurants.sjon
we have a bunch of objects as values.
And the keys here,
these are keys that are available
on those objects to access the different values.
So, .name will give me the name of the restaurant.
And we can now repeat this here for Mexican,
that's the cuisine.
And for the address here,
just make sure that the keys you use here
are the keys that are stored in the .json file.
Here I then have this description.
So that is the description.
And then here, I actually want to inject
a dynamic value as an attribute value.
And that's possible as well.
You can not just use the EJS placeholders here
in places where you wanna show some text to the user,
you can use them anywhere in your HTML code,
including attribute values.
So here as a value for ref on this anchor tech
I'll use restaurant.website,
because website is my key here.
And if I now save all of that,
that should work as soon as we ensure that restaurants
is made available as a key for this template,
just as we made numberOfRestaurants available.
So an app.js here on this render method,
besides passing numberOfRestaurants into the render method,
I now also pass a second key value pair here
separated by a comma, and that's restaurants.
If you chose a different name in your template here,
instead of restaurants,
then you should choose a different name here as well.
But for me it's restaurants
and the value is my stored restaurants array.
So I reformat it to this.
Here I'm parsing in storedRestaurants,
which are these parsed restaurants from my .json file,
and that is this array of restaurant objects
that will be made available to that template.
If we now save all of that and we reload this page,
we see our restaurants here.
And if I hover over these view website buttons here
in the very bottom left corner of this page,
you see the different website URL, so that's also working.
And that now is another a key feature of EJS.
We cannot just output single values,
though that's also an important feature,
but we can use this slightly different syntax
to basically write any JavaScript code, including,
and very important, loop code to repeat some HTML content.