Deserialize query string to JSON object

Question

Tried to find how to make {foo:"bar"} from ?...&foo=bar&... but googled and got only to jQuery.params which does the opposite. Any suggestions please (built-in javascript function, jQuery, Underscore.js - all goes)? Or, do I need to implement it by myself (not a big hassle, just trying not to reinvent the wheel)?

well here you go: stackoverflow.com/questions/901115/… . A little search always helps. — ggozad
– ggozad, Commented Jul 19, 2012 at 9:27
@ggozad: searched for a conversion into JSON/object, not just getting values. thanks for the link! sadly this function isn't standard somewhere in jQuery or so. — Alexander Abramovich
– Alexander Abramovich, Commented Jul 19, 2012 at 9:30

Carlo G · Accepted Answer · 2017-06-30 08:53:43Z

15

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));
};

edited Jun 30, 2017 at 8:53

answered Aug 25, 2015 at 12:58

Carlo G

4427 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

GTS Joe Over a year ago

Great answer, thanks. I love that it creates arrays out of multiple select checkboxes.

mortezashojaei Over a year ago

Good answer but i think its better with if (key !== "") on top of your if statements

Vish V Over a year ago

If & is there in value then it is not working. Any solution for it? test=1&test=2&2&test=3&check=wow&such=doge

Raphael Over a year ago

What is the situation where there is an actual ampersand in a query string? Won't any ampersands in a URL be encoded as %26?

C J Over a year ago

Five years later, this answer still came in handy. Thank you.

talsibony · Accepted Answer · 2015-02-03 08:03:11Z

12

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"}

answered Feb 3, 2015 at 8:03

talsibony

8,7966 gold badges49 silver badges48 bronze badges

2 Comments

Vish V Over a year ago

If & is there in value then it is not working. Any solution for it? test=1&test=2&2&test=3&check=wow&such=doge

talsibony Over a year ago

if its there I think it needs to be url encoded like below: queryStringToJSON('test6=1&test3=2%262&test1=3&check=wow&such=doge')

Zagor23 · Accepted Answer · 2012-07-19 09:20:26Z

9

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.

answered Jul 19, 2012 at 9:20

Zagor23

1,96312 silver badges14 bronze badges

Comments

Penny Liu · Accepted Answer · 2020-09-11 02:18:47Z

9

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'))
);

edited Sep 11, 2020 at 2:18

answered May 22, 2020 at 6:03

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

Comments

random-forest-cat · Accepted Answer · 2019-10-30 17:19:40Z

2

for simple and flat query strings, something like this will do the trick

const queryStringToObject = (queryString) => {
  let obj = {}
  if(queryString) {
    queryString.slice(1).split('&').map((item) => {
      const [ k, v ] = item.split('=')
      v ? obj[k] = v : null
    })
  }
  return obj
}

> queryStringToObject('?foo=bar&baz=buzz')
{ foo: 'bar', baz: 'buzz' }

edited Oct 30, 2019 at 17:19

answered Dec 23, 2016 at 19:12

random-forest-cat

36.3k12 gold badges127 silver badges104 bronze badges

3 Comments

Amirition Over a year ago

It deletes the first character for query strings like data=thisisatestdata

random-forest-cat Over a year ago

you'd want to remove the call to slice if you are including the question mark, or consider extending the method to support both string types

Sunil Lulla Over a year ago

also if there are empty values in query strings then it just removes the key from the object, it should be empty strings instead.

Dirk Diggler · Accepted Answer · 2020-09-01 14:17:44Z

1

The URLSearchParams() constructor creates and returns a new URLSearchParams object.

var url = new URL('https://example.com?foo=1&bar=2'); 
var params = new URLSearchParams(url.search);

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams

answered Sep 1, 2020 at 14:17

Dirk Diggler

8651 gold badge11 silver badges24 bronze badges

Comments

Husnain · Accepted Answer · 2020-11-06 14:55:38Z

0

I know this thread is a bit old - but this is what worked for me - hopefully it will help someone else too ..

var _searchModel = yourquerystring.split("&");
for (var x = 0; x < _searchModel.length; x++) {
  //break each set into key and value pair
  var _kv = _searchModel[x].split("=");

  //console.log(_kv);

  var _fieldID = _kv[0];
  var _fieldVal = _kv[1];
}

answered Nov 6, 2020 at 14:55

Husnain

891 silver badge3 bronze badges

1 Comment

dipenparmar12 Over a year ago

Snippet now working as expected, it has error ReferenceError: yourquerystring is not defined

Collectives™ on Stack Overflow

Deserialize query string to JSON object

7 Answers 7

5 Comments

2 Comments

Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

2 Comments

Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related