All language subtitles for 012 HTML Templating_ Filling the Templates_Downloadly.ir_en

[Jonas Schmedtman] So we already have for HTML templates.

Now comes the hardest part, which is to

actually replace the placeholders with the content.

So let's actually start with the overview.

And let's give ourselves some breathing space here

and add some comments.

(typing on a keyboard)

So overview page and some comments down here.

So the product page, and there here we have the API.

And then here we have the Not found.

Alright, so that looks a bit better already.

So again, we're starting with the overview page.

And so the first step

is to actually load the template overview.

Okay, so each time there is a new request

for this route, so the adjusted route

or /Overview, the first thing that we're gonna do

is to read the template overview.

But, just like before, we can actually do that

outside of this callback, okay?

Because these templates, they will always be the same

So you can actually read them to memory

right in the beginning when we start the application.

And then, when necessary, we simply go ahead

and replace the contents in there.

Okay, so just like we did with the data here,

there's also no need to read the data

each time there is a request

and the same happens for the templates.

Okay?

So I'm actually going to to ahead

and do it for all three templates here

so we have that out of the way.

So I'm gonna go ahead, and just to get this one, call it

temp for template

overview, and DAR name

and here we have templates.

And then /template-overview.

Okay, then duplicate this here twice

so we have one

for the card, so template-card,

and then one for template product.

Product, alright.

And again, keep in mind that we can do

with the synchronized version because

we are in the top level code.

We just only executed once, right at the beginning

when we load up these applications.

So we could not do this inside of this

createServer callback function, okay?

Because this one is called each time there is a request.

And if we have one million requests at the same time,

then we could block the code one million times,

once for each request.

And that is something that we do not want.

So, the overview, let's actually go ahead

and first of all just to test it,

send this tempOverview as the response.

Now, before we can do that,

we need to go ahead and set this content type to HTML.

So let me actually copy this piece of code here.

So the status code is 200

and content type should be text/html.

So restart the server here

and let's now take a look,

and indeed, here we go.

So here's our styled page

that we already know from this one.

Now what's of course missing here

is these rows, and that's because

we still have our placeholder.

And so the next task is to now replace this placeholder

with the actual cards.

And how will we do that?

Well, remember that in data object,

we have an array of all the objects

that are in data.JSON.

So, all of these five objects, all in JavaScript objects,

because we already parsed this data with just a string.

Okay?

So data object again is an array of

at this point, five objects.

So what we have to do is

to basically loop through this array,

and for each of them, replace the placeholders

in the template with the actual data

from the current product, okay?

Make sense?

So, let's put that in code.

So data object, we're gonna loop through it with a map

because we want to return something

and that something, we will save into a new array,

so let's call that one the cardsHtml,

Okay?

And so I'm sure you are familiar with the map method, okay?

So what map does is accepts a callback function

and this callback function gets as an argument

the current element, so the element of the current loop

and whatever we return here

will then be saved into an array, okay?

So let's say we're looping over an array with five elements

which is the case here,

and for each element, we will return something,

and that something will then be put into the same position

but in this new cardsHtml array.

So, what will we do in each of these iterations?

Well, we want to replace the placeholders, right?

And so I'm actually gonna go ahead

and create a function for that

and that will be called replaceTemplate.

Okay?

And replaceTemplate will take in the card HTML.

So basically, the tempCard.

And it will take in the current object, so element.

Okay?

So this element is what holds the data, right?

So again, each of these is now an object

which contains the data in each of these properties.

Okay?

And don't worry, if it doesn't make 100% sense now,

it will once we create this replaceTemplate function, okay?

So let's now actually do that up here as well.

So replaceTemplate is a function

which takes in a template, just gonna call it temp here

and of course a product.

Alright.

So let's create a variable called output

and that one will be

template.replace in our placeholder.

And we're gonna put here all of the placeholders

that we have, starting with PRODUCTNAME, okay?

And so that one will be replaced with product.PRODUCTNAME.

So product, which is this argument

that we passed into the function, .PRODUCTNAME

because, well, that's the name of the field

where the product name is.

Alright?

So, go ahead and copy that one, and alright.

Now one small trick that we have to use here

is to actually not use the quotes,

but instead use a regular expression.

And that's because there might be

multiple instances of this placeholder

and so the trick is to wrap this in a regular expression

and use the g-flag then on it.

Which means global and so this will make it

so that all of these placeholders will get replaced

and not just the first one that occurs.

So this replaces the product name,

now let's go ahead and replace all the other one.

So output =

output.replace,

and now we'll just go ahead

and copy this to make my life a bit easier.

So image, and it is called image

and not in uppercase, so just like this.

Okay?

Now up here, I created this variable

because I wanted to replaced this product name in temp.

So in the argument, and it's not a good practice to

directly manipulate the arguments

that we pass into a function.

And so I created a new variable

and from now on, I will then

manipulate that first one, okay?

And so that's why it's not a const, but a let.

So a let, we can mutate after it's been created, okay?

Now let me just go ahead, copy a couple of these.

So price, and it's called price here as well,

then we have from,

then we have nutrients.

Of course I could copy all of this,

but I'm not gonna jump back and forth here.

So quantity,

description,

and I'm probably gonna do some mistake here

by writing all of this out manually

but in a small product, that is no big deal at all.

So actually this one we don't need,

or actually we do need

because for the organic,

so the organic that's missing,

but remember the organic was a bit special.

So in this case, if product is not organic,

so product.organic,

if it's false,

so remember, that is actually a bolding.

So for example, we have organic true here,

but we have false here.

Okay?

And so if it is false, well in that case,

we then want to replace the NOT.ORGANIC.

So the NOT.ORGANIC placeholder with simply not-organic.

So not-organic because this is

the class name that I showed you earlier.

So,

it is

this one.

Okay?

So it will then be replaced here, okay?

And so again, in case it's not organic,

well, then the class name NOT_ORGANIC will be here

and this entire batch will then be not displaced.

Alright, make sense?

So,

let's see if it w--

ah, sorry,

the actual code is below it.

So let's try to make more sense of it.

So again, we loop over this data object already here

which holds all the products

and in each iteration, we will replace the placeholders

in the template card with the current product

which is element, right?

And this arrow function will then implicitly return it here.

So it's the same as having return here, okay?

But it's not really necessary because

in a arrow function, if you don't have the curly braces

this value here automatically gets returned.

Okay, so just in case you didn't know that,

I just remembered that we forgot to actually

return the output from here.

Okay?

So of course, we input the template and the product,

but then of course we have to output the final HTML.

Right?

And so that then gets plugged in in here,

and so then finally, all of this here

will replace an array, with the five final HTML's,

each for one of the five cards.

So, each for one of the five products, alright?

Now let's actually go ahead and log this to the console

before we put it on the overview webpage.

So cardsHtml just to make sure that everything works here.

Okay?

So we need to reload the server, don't forget that.

This all works the same,

but let's now take a look at the console.

And I'm starting to see nice things here.

So we have an array,

and we actually have the stuff replaced.

So we have some avocados here.

It says here FreshAvocados.

It has the four avocados per box, the price,

and so yeah,

that actually all looks very nice.

And indeed it's also an array.

So we have this first figure,

then a comma and so here starts the next element

so the next figure, alright?

So we have right now an array of all these elements

but what we want is actually not an array

but we want one big string containing all of this HTML.

So, that's actually very simple to achieve.

All we have to do is at the end of this array,

so we remember all of this here

returns this array that we see down here,

and so at the end all we do

is join by an empty string,

and so this will join all of these elements into a string.

And so now cardsHtml is truly a string.

Okay?

And so now we have our cards ready

and the last piece of the puzzle

is to go ahead and replace that placeholder.

So this here, actually copying it now,

so now replacing this placeholder

with the HTML that we just created.

So let's call it output here

and all we have to do

is tempOverview

with just a string that holds the overview HTML, right?

.replace,

and replace it with cardsHtml.

Alright?

That's it.

Now all we have to do is to actually respond with the output

and not with whatever we had before.

Okay, cool.

So that looked a bit complex,

but if you think about it,

I hope that it makes complete sense to you.

And so let's go ahead and test this now

and I hope I have no mistakes

and something went wrong, alright.

So what's that?

Okay, so I just misspelled replace.

That's one of the most common errors I get all the time.

Like some small spelling mistake.

Reload and bam, here we go.

So here are our five rows.

So beautiful, beautiful, beautiful.

Now it doesn't quite look like the original one

because what's missing is like these, this organic here.

Okay?

So let's see what's wrong there.

Also for some reason, I don't see the quantity here

but only if it's not organic.

Well that's weird,

so let's try to investigate what is happening here.

So the error is probably somewhere here

in this replaceTemplate function.

But actually, everything looks kind of correct here.

So also here on this not organic replacement.

So let's take a look at our template card

and,

so I see here that when there's this NOT_ORGANIC,

well, actually this entire box here,

so also this H6

will not be visible anymore.

So something looks wrong here,

let's take a look at the original one

just to inspect the HTML here.

So card detail is this one

and so we, yeah,

so we actually have three card details here

while in the template, we only have one, okay?

So let's go ahead and copy this one.

So in the details you can actually copy an element

and it will then,

well just like that, copy the entire element.

So this is what it's supposed to look like.

And so here it should say organic

and not quantity per box, okay?

That one is probably the next one.

So,

let's quickly fix that.

And here, of course we do not want that,

and so yeah, that looks better,

close it up, restart the server,

and let's check that one out again.

And now, bam, here we go.

So now it's working and indeed, it works exactly the same.

Beautiful.

So that is, that is really nice.

Let's just go ahead and delete, for example, the avocados

just to see what happens.

I'm just gonna do control, X to cut it,

reload it here, and it's not changing

and that's of course because remember

that

this, this data

is actually only read in the beginning

when we start the app, okay?

So in order for this to take effect,

we do effectively need to restart the application.

Okay, so no big deal.

And now it's gone, okay?

Because it's no longer in the JSON file

that it's read at the point of time

when we start the application

Okay?

Let's put it back here, give it a save, restart,

open this guy up, reload, and here it's back.

So it's now really working dynamically

by reading all this data right from the JSON file.

So this one works, let's check the links also

down there in the left-hand, bottom corner.

You see that the ID changes from zero, one

to, and so on and so forth,

but if I click this here,

well, when we get Page not found.

And that's because our route is not yet ready for this.

Okay?

And so let's actually do that in the next video

and implement the product detail page

for each of these products.

So, don't wait and let's move on now.