Deserialize query string to JSON object
In modern browsers, you can also use Object.fromEntries which makes this even easier.
function queryStringToObject(queryString) {
const pairs = queryString.substring(1).split('&');
// → ["foo=bar", "baz=buzz"]
var array = pairs.map((el) => {
const parts = el.split('=');
return parts;
});
// → [["foo", "bar"], ["baz", "buzz"]]
return Object.fromEntries(array);
// → { "foo": "bar", "baz": "buzz" }
}
console.log(queryStringToObject('?foo=bar&baz=buzz'));
The URLSearchParams interface can Interactive with the browsers URL search parameters. The browser support for URLSearchParams is pretty decent.
For your case, it would be:
console.log(
Object.fromEntries(new URLSearchParams('foo=bar&baz=buzz'))
);
I am posting here my function just in case other will look and will want to get it straight forward no need for jquery native JS. Because I was looking for the same thing and finally made this function after viewing others answers:
function queryStringToJSON(queryString) {
if(queryString.indexOf('?') > -1){
queryString = queryString.split('?')[1];
}
var pairs = queryString.split('&');
var result = {};
pairs.forEach(function(pair) {
pair = pair.split('=');
result[pair[0]] = decodeURIComponent(pair[1] || '');
});
return result;
}
console.log(queryStringToJSON(window.location.href));
console.log(queryStringToJSON('test=1&check=wow'));//Object {test: "1", check: "wow"}
You have Ben Alman's jQuery BBQ
and a jQuery.deparam
in it. It is described as The opposite of jQuery.param, pretty much.
http://benalman.com/code/projects/jquery-bbq/examples/deparam/
First example is exactly what you need.
Actually the above answer by @talsibony doesn't take into account query string arrays (such as test=1&test=2&test=3&check=wow&such=doge
). This is my implementation:
function queryStringToJSON(qs) {
qs = qs || location.search.slice(1);
var pairs = qs.split('&');
var result = {};
pairs.forEach(function(p) {
var pair = p.split('=');
var key = pair[0];
var value = decodeURIComponent(pair[1] || '');
if( result[key] ) {
if( Object.prototype.toString.call( result[key] ) === '[object Array]' ) {
result[key].push( value );
} else {
result[key] = [ result[key], value ];
}
} else {
result[key] = value;
}
});
return JSON.parse(JSON.stringify(result));
};