Hi Welcome to Mrvirk.com. I'm your host Navjot Singh today I'm gonna talk
about how to get URL parameter values from your URL basically so this would be
something like if we expect to pass some parameter into our URL let's say I want
to pass a Geo and I'm gonna say it's UK or it's Ireland if I'm in Ireland I'll
say ie so right now we're not actually making any use of this but in this
tutorial what I'm gonna do is we're gonna actually write code to get this
and example I am passing in a Geo and a size parameter and that's that basically
kind of returns the value from taking the value from here and then returning
it down in the console so that's the sole purpose let's jump into code so
Before we jump in let me show you the tutorial so in this tutorial basically I
move through the solution the code and a little bit of explanation and I usually
keep improving the solution over time so do visit this tutorial I'll leave a link
to this in the video description below let's dig into the code so from this
tutorial I'll click on edit on code pan so what you can do is you can basically
go on code pan and actually edit the code by yourself let's actually look at
the example like how the solution is actually outputting so what I'm gonna do
here is I'm gonna say I'm gonna pass a parameter let's say name equals enough
Joad and if i refresh this page this should be able to fetch the name and
Prentiss okay so I read this before so what I have to do to get the
name from there would be war name equal URL dot so I'm gonna explain each bit
like what each function and etc etc is perm starts got name and now this should
be able to give us the name this is what I love about coding like you jump in you
run into errors and you solve it so it's saying issues with parsing URL
parameters cannot read properly get of undefined da-da-da-da-da I define the
name hmm actually what our code expects is it's expecting both and let's try to
print out the name value as well for example and I'll just say and plus name
does it print the name for us clear the console save give it a refresh it's not
liking gut okay so see here here I did a little bit of a
typo so search parents parameters so I'm not gonna edit this part because I like
to keep my videos real you do not want to kind of give you a content where I do
not make any mistakes so from here you can see we're able to get the URL
parameter value let's pass in the rest of the parameters to kind of get the
rest of the values and make it error-free
let's clear the console and we can say and gio equals let's say USA for this
example and we can say Desai's hey girls whatever large how did I save it yes
okay perfect that's printing fine for me I
can save that clear the console and run it again
perfect so USA this is the Geo this is the size and this is my name so that's
how we kind of got that let's dig into the code the best thing about this
example is you can actually go in on code plan actually add your own
parameter values add your own parameter define your own parameters like I did
for name whereas I already had these existing parameters I could have just
showed you that but we went through the path of adding that and we made mistakes
and we learn from that so what I'm doing here is calling the window dot onload
which basically kind of figure out when the page actually loads it's gonna call
this an ominous please forgive my pronunciation and English is not my
language a native language so we're gonna call this function or it's called
function expression it's not a function definition so I'm doing a little bit of
error handling here and you can see we're trying to do all this stuff and if
this doesn't happen we basically print an error so what I'm
saying here is wire URL string and window dot location dot H ref what this
does is it takes it actually fetches the URL and
signs this to this so in so to make the things dynamic we have done this so for
example if this could have been like this come on Dax and here we go so this
could had been something like this we can define URL string and you can see
the solution still works but the thing is this is not dynamic you cannot test
it this way you can test it this way which is much better that's why I like
the old version which is window that location that has ref we dynamically get
the URL and we change it to lowercase to kind of you know so in this case if I
would have passed like geo and I define it as geo that could have broken my
things if I wouldn't had don't lowercase so right now it will work fine if we
remove lowercase for example and we give it a save and refresh break yes so you
can see the Geo part bro that's what why I'm using that lower case that kind of
solves a problem for now depending upon your use case and this this may or may
not be applicable but for this use case it works fine and then what I do is I
basically use the URL object and I pass the URL string to it which is over this
yes and what we do from there is we define a name variable which we did
together and what I do is URL dot search parents got name name is this whatever
you define here is what you got to pass in here so you can see name you can say
geo you can see size let's take a quick look at search parents what
so Mozilla has the best documentation on this the URL search permit params
interface defines utility matters to work with the query string of a URL
which is awesome because this was not available previously but now in
JavaScript in the latest version I think es 5 this is available so which
is awesome so what we can do is we can basically use the utilities present at
the URL object level and that's what we're doing here so we're saying search
param which is a URL method which is available
to us because we set new URL and we pass in the URL string and then we say that
cat name get geo that cat sighs awesome and then we basically console it and
that's where where results gets printed and that's it guys it's a very very
simple way of doing things in 2019 and going forward from here whereas this is
not supported on Internet Explorer though if we look at the compatibility
so I'll I'll actually leave a link to this on the video description and on the
tutorial actually I'll leave the link at the tutorial level actually and you guys
can go in and look at it and you can see the compatibility here and see Internet
Explorer is not supported at all for any of the matters whereas for Chrome on 49
version on where's it supported for ad 17 and a rest of them and you can give
it a check from there so going back from there I'll leave the links here and
thanks again guys thanks for watching the video and I
really appreciate that please leave a like and subscribe the channel if this
helped you and please leave your comments so I can improve the content
going forward this is my website recom so do visit us occasionally if you
have time so this is where I post tutorials on technology mostly
JavaScript tutorials and a couple others thanks for watching and stay happy