Convert An Object To A Query String Using JavaScript

You are working with Javascript and need to convert an object to a query string using JavaScript. Still, you need to become more familiar with it. This article will show you two ways: using the URLSearchParams() method or the encodeURIComponent() method.

How to convert an object to a query string using JavaScript?

Before entering this article, you must know that query means a request to query information. So, what is a query in a programming language? The same – the information here will be information extracted from a database – the database. The query performs operations on that data (data manipulation) – add, delete, change.

Using URLSearchParams() method

URLSearchParams is a built-in interface to handle query strings on URLs, with many notable features. However, this relatively new interface is not compatible with Microsoft Internet Explorer and Microsoft Edge (…until Edge uses WebKit). It would help if you recommended users to these browsers. 

We can easily convert an object to a query statement by adding an object as a parameter. See the code below to see how it works.

Code:

const user = {
	id: 1,
	name: "Mark",
	age: 18,
	email: "[email protected]",
};

const queryString = "?" + new URLSearchParams(user).toString();
console.log(queryString);

Output:

?id=1&name=Mark&age=18&email=mark19%40gmail.com

Because the spec of the query statement is to have “?” in front, we will use the string concatenation method to add this value. Then we use URLSearchParams() method to convert the original object to query and convert it to string. So we can easily convert an object to a query string using JavaScript. Or you can also refer to the following method.

Using encodeURIComponent() method

The encodeURIComponent(URI) function returns a string, the result of encoding the URI parameter. This function is commonly used to encode the value of a URL parameter. 

Because it was born to encode different values ​​to the same format as the URI parameter, we can apply it as part of the convert function we need to do.

Code:

const user = {
	id: 1,
	name: "Mark",
	age: 18,
	email: "[email protected]",
};

const queryString =
	"?" +
	Object.keys(user)
	.map((key) => `${key}=${encodeURIComponent(user[key])}`)
	.join("&");

console.log(queryString);

The result returned by this method of ours is the same as the first one. Let’s follow the code and analyze it. The param we need to create here will take each object’s key-value pairs, so we’ll map through them and concatenate them with “?” and “&” at the beginning and end to create a complete query. With this query, we can pass the query values ​​to the url.

Summary

In the article, you were shown how to convert an object to a query string using JavaScript, but you should use URLSearchParams() because it is already written to return a nearly complete query. Good lucks!

Maybe you are interested:

• Convert an Object to a Map using JavaScript
• Convert an Object to JSON String using JavaScript
• Convert a Map to an Object in JavaScript

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs