All language subtitles for 013 Parsing Variables from URLs_Downloadly.ir_en

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.