JSON to Query String

Turning an object into a flat, escaped string

A JSON object has keys, nesting and types. A query string has none of that — it is just key=value pairs joined by &, and every value in it is text. Getting from one to the other means two separate jobs: deciding how to spell a nested key as a flat one, and percent-encoding whatever ends up in each value so a space or an ampersand inside it does not get read as part of the structure.

This page spells nesting the way qs does when you call its stringify — {"device":{"imsi":"234..."}} becomes device[imsi]=234..., and an array becomes indexed keys, tags[0]=voice&tags[1]=sms. It is the same convention the Query String to JSON page reads back, so a round trip through both pages gives you the object you started with.

The escaping choice matters more than it looks. encodeURIComponent is right for a single value going into one parameter; form encoding writes a space as + instead of %20, which is what a browser sends when a form is submitted. Picking the one that matches where the string is going is the difference between a request that works and a server that reads a percent-encoded space as a literal %20.

Numbers go through this site's usual lossless handling rather than a plain JSON.parse. A 19-digit ICCID like 8901240544102066246 stays every digit — JSON.parse alone would silently round it to 8901240544102066000, the same IEEE-754 double precision limit that bites every JSON tool that skips this step.

Building a query string

1. Paste or write the JSON – An object with any amount of nesting, or an array at the top level. Values can be strings, numbers, booleans or null — null becomes an empty value, and any key whose value is undefined is left out entirely rather than written as the text "undefined".
2. Pick the encoding that matches where this is going – Building an <a href> or a fetch URL yourself → One value. Rebuilding a whole address a user will paste into a browser → Whole URL. Simulating what an HTML form actually submits → Submitted form.
3. Copy the result — no leading ? included – The output is the parameter list on its own, so you can append it after your own ? or after an existing & without editing it first.
4. Check it round-trips – Paste the result into Query String to JSON and confirm you get back the object you started with. This catches the one thing worth double-checking: whether your API actually expects bracket notation for nesting, or expects repeated flat keys instead.

An array becomes tags[0]=, tags[1]=, not tags[]= twice. Both are valid and qs reads either back into the same array, but indexed keys are what its stringify produces, and matching that convention is what makes the round trip through Query String to JSON exact.

One JSON object, ready for a URL

The mirror of the example on the Query String to JSON page — same subscriber filter, built the other direction.

{
  "msisdn": "+447700900112",
  "device": { "imsi": "234307481234567" },
  "tags": ["voice", "sms"]
}

msisdn=%2B447700900112&device%5Bimsi%5D=234307481234567&tags%5B0%5D=voice&tags%5B1%5D=sms

When you need this

Building a request by hand

Sketch the filter as JSON — it is far easier to get nesting and array structure right in that shape — then convert it once you are happy with it, instead of hand-typing brackets and percent signs and losing track of which pair goes with which.

Reproducing an API call from documentation

Plenty of API docs show a request body as JSON and expect the equivalent as query parameters for the GET version of the same endpoint. This does that translation without you working out the bracket notation by hand.

Sharing application state in a link

A saved filter, a chart configuration, a search state — express it as a JSON object internally, then turn it into a shareable query string when the link needs to encode it.

Confirming what your framework will actually send

Different HTTP clients handle nested query parameters differently — some flatten with dots, some with brackets, some refuse nesting entirely. Building the string here first tells you what the request should look like before you go looking for why your client sent something else.

Testing with a long identifier

Paste an object holding a device or account ID with fifteen or more digits and confirm the encoded value still has every digit — a common source of "record not found" bugs when a different tool has already rounded the ID before it reaches you.

What this page does

• Writes nested objects and arrays as bracket notation matching qs's stringify, so the result reads back correctly on Query String to JSON.
• Keeps long integers exact through the same lossless numeric handling used across this site — nothing here calls JSON.parse directly on your input.
• Three distinct encodings, matching the three genuinely different situations a value can be encoded for — a single parameter, a whole URL, or a submitted form.
• Omits undefined values entirely and writes null as an empty value, rather than the literal text "null" or "undefined" ending up in your query string.
• Runs entirely in your browser, so nothing you paste — including any tokens or identifiers in the object — leaves your machine.

Questions people actually ask

Why is there no leading ? in the output?

Because the output is meant to be appended to something you already have — either after your own ? if this is the first parameter, or after an existing & if it is not. Adding one automatically would be wrong exactly half the time.

My server does not understand the bracket notation. What now?

Not every backend expects it — some frameworks parse a[b]=1, others expect dot notation like a.b=1, and others do not support nested query parameters at all and want the object sent in the request body instead. Bracket notation is the most common convention, and matches what Query String to JSON reads back, but check your specific framework's query-parsing docs before assuming.

Why did my 19-digit ID come out looking right here but wrong somewhere else?

Because most tools call JSON.parse on the way in, and a plain JavaScript number cannot hold more than about 15-16 reliable digits — IEEE-754 double precision rounds anything past that silently. This page reads the source text directly for exactly this reason.

Which encoding should I pick for a normal fetch() call?

Almost always One value — the same thing encodeURIComponent does, which is correct for building one parameter at a time. Reach for Submitted form only when you are specifically reproducing what an HTML form posts, since that is the one case where a space becomes + instead of %20.

Can I convert a JSON array instead of an object?

Yes — a top-level array is written as indexed keys with no name in front, 0=first&1=second. It is unusual as a query string on its own, but the same rule handles it consistently with how an array nested inside an object is written.

Related tools

Specifications and references

• WHATWG URL Standard — application/x-www-form-urlencoded serializing – The algorithm behind form encoding, including the space-as-+ rule
• MDN — encodeURIComponent – What the default, single-value encoding actually escapes