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