So let's now inject some dynamic content
and for that I want to start with a
simple example before we work on the
actual results that we want to achieve,
which is that we output our restaurants,
here on restaurants, EJS.
for the moment here on restaurants, EJS,
I'll add a new paragraph above of the
restaurant list where
I say we found, and then I want to say X restaurants.
So the number of restaurants stored in this restaurants,
Jason file.
Now of course X should be dynamic.
And that's exactly the kind of problem
we couldn't solve
before with just pre-written HTML.
Because at the moment, of course, we only see X here.
Now we can make that dynamic because we are now using a
templating engine. And because we are in a template file,
EJS file here.
And now here, we can use a special EJS syntax, which,
and that's really important is only
available because we are in the EJS file.
that will be parsed and converted by
that EJS package we installed, now in here
in that place where we want to
output at dynamic value,
we can write smaller than percentage equal,
then any placeholder name, any
variable name of your choice.
Let's say, number of restaurants,
I'll come back to that in a second.
And then percentage that's greater than sign.
So it looks a bit like an HTML tag,
just with a different syntax,
but we basically got an opening tag, and a closing tag.
If you want to call it like this,
please note that the opening tack has this equal sign.
The closing tack doesn't have it.
You'll also see that this is red here for me.
The reason is that by default visual studio code doesn't
understand this EJS syntax.
So we don't get any IDE support for that. Instead,
the opposite is the case.
And my IDE thinks that I'm writing some weird code here.
Maybe I'm trying to write an HTML element and I'm doing it
wrong,
but this will work because this overall file will be parsed
by the EJS package.
And this EJS package will look for this Syntex to then
replace this placeholder with a concrete, value for that.
We now need to pass in that concrete value though.
When the restaurants EJS is rendered as a template,
we need to make sure that this, variable is available
during the renders cycle. So to say,
and that's something we do in app JS. here,
when rendering restaurants,
we can pass a second parameter value to
this render method,
which is optional, but which is required.
You do have some dynamic content in that template.
Here, you can pass in a JavaScript object.
And in that object, you specify any placeholder names,
any variables you are referring to in the template as keys.
So here in this object,
I add number of restaurants because I'm using that key in my
EJS file.
And then we store a value in that key.
And that's the value that will be output in the template.
Now, here,
I want to output the number of stored restaurants and for
the moment, I'll just set this to two soon.
We'll get the actual restaurants from the JS file,
but to prove that this works, let's set it two,
to save all files and then reload this page.
And now you see two here.
And if we inspect this in the browser, then we see here,
it's two written like this here in the browser.
We don't see this strange syntax which we have at the input
EJS file because as I emphasized before,
this file is parsed and rendered on the server.
And only the finished HTML code is sent to the browser.
So in the browser, we don't see any of that placeholder.
but now we got away all for returning a standard HTML file
with dynamic content. And that is something brand new,
which we were not able to do before, In this course,
now we made a huge step forward, because we're now fully
utilizing this backend code.
We don't just use it for storing user input,
which was already a step forward before,
but we now also use it to return dynamically generated HTML
code. And that,
and yet is one of the main reasons for writing your own
service at code and for using a language like node with a
library like express.
So then, for now to round this off,
let's get the actual number of restaurants. And for this,
we need to, in the end,
read our restaurant file and parse the stored restaurants.
So I'll do what I also do here in slash recommend and the
post route.
I'll copy these free lines here and repeat that here.
And then we got our stored restaurants and I want to use the
length of that array,
which it is as a value for number of restaurants.
So here I'll set number of restaurants equal to stored
restaurants dot length, whoops, dot length like this.
We know that storage restaurants will be an array,
so we can safely access that length to get the number of
items in that array.
And with that, if I reload, it's still too,
because I got two restaurants, but of course,
if I add a third restaurant restaurant free, awesome.
Street, five, my city,
and this is a good old German Christine,
the URL is saw awesome.com.
And here I say, it's amazing.
All of course, if I shared this, this works.
And if we en browse the restaurants,
we now have three as a number here.
So that's working and that's why we use a templating engine,
but of course this engine can do more for us.