Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Query Parameters in JavaScript?
Now, the question is why we need to create a query parameter using JavaScript. Let’s understand it via real-life examples.
For example, if you go on amazon’s website and search for any product, you will see that it automatically appends your search query to the URL. It means we require to generate the query params from the search query.
Also, we can allow users to select any value from the dropdown option. We can generate query parameters and redirect users to a new URL based on the selected value to get results. We will learn to create a query parameter in this tutorial.
Here, we will see different examples of creating query parameters.
Use the encodeURIComponent() Method
The encodeURIComponent() method allows us to encode the special characters of the URL. For example, the URL doesn’t contain the space. So, we need to replace the space character with the ‘%20’ string, representing the encoded format of the space character.
Also, encodedURLComponent() is used to encode the component of the URL rather than encoding the whole URL.
Syntax
Users can follow the syntax below to create a query parameter and encode it using the encoded URI component () method.
queryString += encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&';
In the above syntax, the key is a key to set for query params, and the value is related to a particular key for query params. We separate the key and value using the ‘=’ character and two queries using the ‘&’ character.
Example 1
In the example below, we have created the object and stored the key-value pairs. Using the object’s key and value, we make the query parameters. After that, the for-of loop iterates through the object, takes one-by-one key-value pairs, and generates the encoded string using the encodedURIComponent() method.
At last, we have taken the substring of length equal to the queryString’s length -1 to remove the ‘&’ character from the last.
<html>
<body>
<h2>Using the <i>encodedURIComponent() method</i> to Create query params using JavaScript </h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let objectData = {
'search': 'JavaScript',
'keyword': 'query params.'
}
let queryString = ""
for (let key in objectData) {
queryString += encodeURIComponent(key) + '='
+ encodeURIComponent(objectData[key]) + '&';
}
queryString = queryString.substr(0, queryString.length - 1)
output.innerHTML += "The encoded query params is " + queryString;
</script>
</body>
</html>
Example 2
In this example, we are taking the user input for the data of the query params. We have used the prompt () method to take user input, which takes the key and values one by one from the user.
After that, we used the user input values to create the query params using the encodeURIComponent() method.
<html>
<body>
<h2>Using the <i>encodedURIComponent() method</i> to Create query params of user input values</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let param1 = prompt("Enter the key for the first query", "key1");
let value1 = prompt("Enter the value for the first query", "value1");
let param2 = prompt("Enter the key for the second query", "key2");
let value2 = prompt("Enter the value for the second query", "value2");
let queryString = ""
queryString += encodeURIComponent(param1) + '='
+ encodeURIComponent(value1) + '&';
queryString += encodeURIComponent(param2) + '='
+ encodeURIComponent(value2);
output.innerHTML += "The encoded query string from the user input is " + queryString;
</script>
</body>
</html>
In this tutorial, users learned to create query parameters from different data. We learned to make query parameters from the object data. Also, we learned to make query parameters using the user input, which is useful while adding the search feature to the website.
2K+ Views
