‫So in this video we're going to learn
‫how to parse some variables from the URL
‫in order to be able to build the product page.
‫So remember how right in the beginning
‫I imported the URL module,
‫so this one here,
‫in order to be able to parse variables right off the URL.
‫Okay. So, as a first step,
‫let's actually once more
‫log "req.url" to the console
‫and then another thing that I want to log is to actually...
‫the result of using "url.parse" on this URL.
‫So, again, parse is to basically parse the variables
‫out of the URL.
‫So, something like this.
‫So, what we want is "id = 0," right,
‫because right now, the "req.url"
‫is all of this,
‫so this entire URL, and of course,
‫we don't have any route for that.
‫So nothing here in these kind of routers that we have here,
‫actually matches this entire URL.
‫So that's why we get "Page not Found!"
‫And so that's also why we need to change some stuff here.
‫Okay, so let me parse the URL here,
‫so that you can take a look at the result
‫to see what we need to do next.
‫I also need to pass "true" here into this parse function
‫in order to actually parse the query into an object.
‫So, with query, I mean this part here.
‫Okay, so this is called the query string,
‫alright, and so that's what we're effectively parsing,
‫that part from the URL.
‫So restart it
‫and let's just take a look at the logs that we get.
‫So, first is the "req.url"
‫and this is what we were expecting, right,
‫and here is the result of doing "url.parse"
‫So we get the query object here,
‫and so here, we have a nice object which tells us
‫that id is 0, right,
‫so that's beautiful.
‫And then, right below that, we actually have
‫the second piece that we need,
‫which is just the pathname, okay.
‫So, our route is using this pathname,
‫so just "/product," and then we need to know the query
‫in order to respond accordingly to the id of 0.
‫So in this case, for example,
‫loading the avocado product, which is the first one.
‫But if it was number two, for example,
‫then loading this broccoli, right.
‫And so this query and this pathname
‫is what we're going to use for doing that.
‫So, this one we don't need anymore.
‫We also don't want to log anything to the console now
‫because what we want to do instead
‫is to create two variables, called query
‫and ...
‫pathName.
‫And we can do so using the stacks, the structuring.
‫So, again, I hope that you are familiar
‫with this syntax here, and this is how it actually works.
‫So, this object here, it has query and pathName.
‫So by using this structuring like this,
‫with these exact property names,
‫actually it has to be like this.
‫So with these two exact property names,
‫it will create these two variables,
‫one called query and one called pathname,
‫with exactly the values that we have here.
‫So query will be this one,
‫and pathname will be "/product," in this case.
‫Great. Now all I have to do is go ahead
‫and replace this here with this one.
‫All right.
‫Let's delete this one, and just to make sure
‫let's actually log the query to the console
‫in case we are on the product page.
‫"console.log" the query object.
‫And now, we're back to finding the page
‫and we also have to query with this id 0.
‫So, perfect. So now we're ready
‫to actually build this page using our template.
‫And that should be very simple,
‫actually way simpler than the overview page,
‫because here we don't have to do
‫any of these crazy loops over here
‫because there's one simple template,
‫all we have to do is to replace everything.
‫So, in the first step, let's actually figure out
‫which is the product that we want to display.
‫So I'm creating a variable called product,
‫and that will be equal to the data object
‫at the position "query.id."
‫Okay, makes sense?
‫So the data object is an array,
‫and we will then retrieve the element
‫at the position that's coming from the query.id.
‫So, if it's zero, then it's element zero,
‫if it's two, it is element number two.
‫Okay, and so this is the simplest way
‫of retrieving an element based on a query string.
‫Now another thing that we need to do
‫is to get this exact same Head here, okay,
‫and finally we simply create our output.
‫So, output is simply replaceTemplate,
‫and the HTML that we need to pass in
‫is the tempOverview, or actually the tempProduct,
‫and what we pass in is the product.
‫And that's it!
‫Now we just send the output as a result,
‫or as a response actually, and so that's it.
‫So this part here makes sense, right?
‫So, again, replaceTemplate expects us
‫to put in a template and a product.
‫So a product is an object with all of these properties.
‫And so that product comes here
‫right from this data object.
‫So in replaceTemplate, we pass in the template product,
‫so this one, that we loaded up from the file
‫right in the beginning, and then product.
‫As I mentioned, of course, the one coming from the array.
‫And so that should actually be it.
‫So if the template is correct,
‫then this should be working now.
‫So, restarting the server,
‫let's reload it,
‫and indeed, here we go.
‫So, that is great, that makes me really happy,
‫when this kind of stuff works like this,
‫beautiful, everything is perfect.
‫Also this back button, oh that doesn't work.
‫Okay. So we need to change the HTML template here.
‫So where is that? It is in product,
‫and this link here, where is that, ah.
‫Yeah, it points to nowhere basically,
‫and what we want is to go back to overview, right.
‫Restart the server, reload this page,
‫and now, now it works.
‫Let's try out on without the organic patch,
‫and indeed, it is not here.
‫Before it was, and now it's gone.
‫And all of this stuff here of course
‫is dynamic coming from that JSON file. Yeah.
‫So all of this works. Beautiful.
‫That's really really great.
‫And our project, we can now say, is actually finished.
‫Just one more small thing that I want to do,
‫which is just to show you some nice thing that we can do.
‫But besides that, our project is working.
‫So congratulations, you just finished your very first
‫really cool looking node.js project.
‫And it wasn't that hard, right?
‫I mean, some of the things that we did
‫are more related to JavaScript programming in general,
‫and not so much about node.js itself, right?
‫So stuff like this here, which was maybe kind of confusing,
‫but again at the end of the day that is just
‫regular JavaScript really, isn't it?
‫So again, the functionality is there,
‫there's just one more small thing that I want to do
‫in the next video, and when you reach that one,
‫I will tell you what that is.