-: [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.