JavaScript

Convert an Object to a Query String Using JavaScript

Creating URL and query string parameters is a common task for JavaScript programmers. Moreover, using a layered object with key-value pairs is a logical method for creating query string parameters. In JavaScript, for the conversion of an object to a query string, use the “toString()” method of the “URLSearchParams()” constructor or the “Object.keys()” method with “map()” and “join()” method are used.

This article will describe the ways for converting objects to query strings using JavaScript.

How to Convert an Object to a Query String Using JavaScript?

For conversion of an object to a query string, use the following methods:

Let’s examine these methods individually!

Method 1: Conversion of an Object to a Query String Using toString() Method of the URLSearchParams() Constructor

Use the “toString()” method of the “URLSearchParams” interface for converting objects to query strings because it is the most straightforward method. The global object contains the URLSearchParams class, which is a component of the URL module. The “URLSearchParams” interface offers effective methods for interacting with a URL’s query string in JavaScript. It can modify and add query string parameters.

Syntax

Follow the given syntax for “URLSearchParams” interface:

new URLSearchParams(object).toString()

Here, pass the “object” to the constructor of the “URLSearchParams” interface, which will convert the key-value pairs into a string using the “toString()” method.

Return Value

A string containing a query string valid for insertion in a URL is returned by the “URLSearchParams().toString()” method.

Example

Create an object with properties “name”, “age”, and “email”:

var object = {

    name: 'Mari',

    age: 28,

    email: 'mari@gmail.com'

};

Call the toString() method with URLSearchParams() constructor by passing the object as an argument to the constructor and store the result in the variable “objString”:

const objString = '?' + new URLSearchParams(object).toString();

Print the string on the console using the “console.log()” method:

console.log(objString);

Output

The output shows that the object is successfully converted to the string.

Method 2: Conversion of an Object to a Query String Using Object.keys() Method with map() and join() Methods

Another approach to convert an object to a string is the “Object.keys()” method with “map()” and “join()” methods. The “Object.keys()” method is used to retrieve the array of object’s keys. The “map()” method is used for iterating over the array, and the “join()” method is used to join all the results by an ampersand “&“symbol.

Example

Use the below lines of code for converting an object to a query string:

const objString = '?' + Object.keys(object).map(key => {

      return `${key}=${encodeURIComponent(object[key])}`;

    }).join('&');

In the above code:

  • First, get the keys of the object using the “Object.keys()” method.
  • Then, iterate over the array of keys using the “map()” method.
  • Use the “encodeURIComponent()” method to encode the query parameter values.
  • Finally, join all the results using the “join()” method by an ampersand “&” symbol.

Output

That was the essential information related to the conversion of a string from an object using JavaScript.

Conclusion

To convert an object to a string, use the “toString()” method of the URLSearchParams() interface or the “Object.keys()” method with map() and join() methods. The second approach is suitable for supporting old browsers, while the first approach is used for new browsers. This article describes the ways to convert objects to query strings using JavaScript.

About the author

Farah Batool

I completed my master's degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.