As a JavaScript developer, you are frequently required to construct URLs with query string parameters when asynchronously calling a RESTful API via XHR. One good way to add query string parameters to the URL is by creating an object and then converting it into a query string. This method is particularly useful when you have a lot of query string parameters.

In this article, I'll show you how to turn an object into query string parameters in JavaScript. Let us say we have the following object:

const params = {
    name: 'John Doe',
    email: 'john@example.com',
    profession: 'Content Writer',
    age: 29
};

map() & join()

The simplest way to convert the above object into a query string is by using a combination of map() and join() JavaScript functions:

// convert objec to a query string
const qs = Object.keys(params)
    .map(key => `${key}=${params[key]}`)
    .join('&');

// print query string
console.log(`http://example.com?${qs}`);

In the example above, the map() function iterates over all keys in the object and creates an array of strings like key=value. The join() method is then used to join them together with &.

Now if you run the above code, you should see the following output:

http://example.com?name=John Doe&email=john@example.com&profession=Content Writer&age=29

For older browsers that do not support the latest ES6 features we are using above, you can do the following:

var qs = Object.keys(params).map(function (key) {
    return key + '=' + params[key]
}).join('&');

URL Encoding

The object keys and values may contain spaces and special characters prohibited in the URL. Therefore, it is recommended to properly encode each key-value pair by using the encodeURIComponent() method:

const qs = Object.keys(params)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join('&');

Here is how the output looks like now:

http://example.com?name=John%20Doe&email=john%40example.com&profession=Content%20Writer&age=29

Take a Look at this guide to learn more about encoding URLs in JavaScript.

URLSearchParams

The URLSearchParams interface provides utility methods to work with the query string of a URL in JavaScript. You can also use it in modern browsers to convert an object into query string parameters:

const qs = new URLSearchParams(params);

You should see the following output:

http://example.com?name=John+Doe&email=john%40example.com&profession=Content+Writer&age=29

Take a look at this guide to learn more about the URLSearchParams interface.

querystring module

If you are working with Node.js, you can use the native querystring module to convert an object into query string parameters as shown below:

const querystring = require('querystring');

// convert object to a query string
const qs = querystring.stringify(params);

The querystring module encodes query string parameters automatically, so you don't need to do anything.

✌️ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. Subscribe to RSS Feed.

👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, Buy me a coffee (cost $5) .

Need help to launch a new product? I am available for contract work. Hire me to accomplish your business goals with engineering and design.