Serialize object to query string in JavaScript/jQuery

Question

I'm trying to find information on how to serialize an object to query string format, but all my searches are drowning in results on how to go the other way (string/form/whatever to JSON).

I have

{ one: 'first', two: 'second' }

and I want

?one=first&two=second

Is there a good way to do this? I don't mind plugins or whatnots - if the code I find is not a plugin, I'll probably re-write it to one anyway...

Solution 1

You want $.param(): http://api.jquery.com/jQuery.param/

Specifically, you want this:

var data = { one: 'first', two: 'second' };
var result = $.param(data);

When given something like this:

{a: 1, b : 23, c : "te!@#st"}

$.param will return this:

a=1&b=23&c=te!%40%23st

Solution 2

For a quick non-JQuery function...

function jsonToQueryString(json) {
    return '?' + 
        Object.keys(json).map(function(key) {
            return encodeURIComponent(key) + '=' +
                encodeURIComponent(json[key]);
        }).join('&');
}

Note this doesn't handle arrays or nested objects.

Solution 3

Another option might be node-querystring.

It's available in both npm and bower, which is why I have been using it.

Solution 4

Alternatively YUI has http://yuilibrary.com/yui/docs/api/classes/QueryString.html#method_stringify.

For example:

var data = { one: 'first', two: 'second' };
var result = Y.QueryString.stringify(data);

View more solutions

Comments

[Simon Steinberger]

Here are some nice plain JS solutions: stackoverflow.com/questions/1714786/… Some of them are not longer than the framwork solutions here.

[crv]

Note that if you have an array in your object it doesn't get parameterized correctly.

[Chris Laplante]

@crv: Right. JSON is probably best in that case

[Danyal Aytekin]

@crv I have an array in mine and it is working fine.

[Amicable]

This won't work with asp.net 4.0 because of the & in the query string without you specifically setting your requestValidationMode="2.0"

[Valentin H]

It is not maintained any more.

[Valentin H]

Cool, works! I've only added if ( json[key] != null ) for omitting nulls

[t.888]

This is a nice, JavaScript-only solution. One can assign the call to Object.keys to a params variable and return params.length && params.join('&') || "" for cases where the object might be empty, i.e., json={}.

[NibblyPig]

This works better than $.param because param encodes for forms not urls, so with param space becomes + instead of %20 which can cause all kinds of issues, especially with MVC

[newman]

It doesn't handle nested objects correctly.

[magician11]

Using ES6 it's a pretty clean and neat solution for simple JavaScript objects gist.github.com/magician11/c16ae65cacd5cdb793f5f8215c1ef811

[Aral Roca]

jsonToQueryString({ query: true, options: { nested: true }}) is return object[Object] :( ?query=true&options=%5Bobject%20Object%5D