This article will illustrate the approaches to get the values from the GET parameters in JavaScript.
How to Get the Values From the GET Parameters Using JavaScript?
To get the values from the GET parameters in JavaScript, use the “get()” method and “URL()” constructor in combination with the following approaches:
Method 1: Get the Value From the GET Parameters Using “URLSearchParams()” Constructor in JavaScript
The “get()” method gives an element from the mapped object. The “URL()” constructor gives the newly created URL object, and the “URLSearchParams()” constructor returns a new URLSearchParams object. These approaches can be implemented to create a new URL object and get the corresponding URL value based on the passed parameter.
Syntax
In this syntax, “key” corresponds to the element key of the map that needs to be returned.
Example
Let’s overview the below-stated code lines:
let myLink = new URL("http://www.google.com/home/section1?myParam1=JavaScript&myParam2=Linuxhint");
const params = new URLSearchParams(myLink.search)
console.log("The resultant value is:",params.get("myParam2"))
</script>
In the above code snippet:
- First of all, create a new URL object having the stated URL via the “new” keyword and the “URL()” constructor, respectively.
- In the next step, likewise, create a new URLSearchParams object. Pass the specified URL as its parameter. Also, associate the “search()” method with it to fetch the position of the first match.
- Lastly, apply the “get()” method by referring to the latter created object.
- In its(method) parameter, get the corresponding value based on the passed parameter.
Output
In the output, it can be seen that the corresponding value has been fetched successfully.
Method 2: Get the Value From the GET Parameters Using “searchParams” Property in JavaScript
The “searchParams” property gives a URLSearchParams object. This property can be utilized in combination with the discussed approaches to get the corresponding user-defined value passed in the URL.
Example
Let’s overview the below-provided lines of code:
let a = 'JavaScript';
let b = 'Linuxhint';
let myLink = "http://www.linuxhint.com?myVar1=" + a + "&myVar2=" + b;
let myURL = new URL(myLink)
let myParam = myURL.searchParams.get("myVar2");
console.log('The resultant value is : ' + myParam);
</script>
In the above code block:
- Firstly, initialize two variables having the stated string values.
- In the next step, specify the URL by passing the initialized values.
- After that, create a new URL object and pass the specified URL.
- Finally, apply the “searchParams” property and the “get()” method in combination to get the passed string value against the pointed parameter and display it on the console.
Output
In the above output, it is evident that the desired requirement is fulfilled.
Conclusion
To get the values from the GET parameters in JavaScript, use the “get()” method and “URL()” constructor in combination with the “URLSearchParams()” constructor or the “searchParams” property. These approaches can be utilized to get the corresponding or the passed values from the URL based on the passed parameters in the “get()” method with the help of examples. This write-up discussed the approaches to get the value from the GET parameters in JavaScript.
