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