How to Convert Object to QueryString Parameters and Back in JavaScript

How to Convert Object to QueryString Parameters and Back in JavaScript

In this tutorial, will show you some ways to convert an object to Query String Parameters and Back in JavaScript

In this tutorial, will show you some ways to convert an object to Query String Parameters and Back in JavaScript

Are you having an object like this:

var params = {
    a: 1,
    b: 2,
    c: 3
};

And you want to convert to:

"a=1&b=2&c=3"

Using map and join

# ES6
var query = Object.keys(params).map(key => key + '=' + params[key]).join('&');
# ES5
var query = Object.keys(params).map(function(key) {
    return key + '=' + params[key]
}).join('&');

If you know you're keys and values need to be encoded, you should use encodeURIComponent like this:

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

Convert URL parameters to a JavaScript object

var query = "a=1&b=2&c=3";
var obj = JSON.parse('{"' + decodeURI(query).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
console.log(obj);

# return { a: '1', b: '2', c: '3' }

Use decodeURIComponent

JSON.parse('{"' + query.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value) })

Happy Coding!

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

How to Retrieve full Profile of LinkedIn User using Javascript

I am trying to retrieve the full profile (especially job history and educational qualifications) of a linkedin user via the Javascript (Fetch LinkedIn Data Using JavaScript)

Java vs. JavaScript: Know The Difference

Java vs. JavaScript: Know the Difference, Java vs. JavaScript: What's the Difference? Java vs. JavaScript: Major Similarities and Differences. pros and cons of JavaScript and Java.