JSON to Query String Converter: Turn Objects into URL Parameters
Learn how to convert JSON objects into URL query strings with proper percent-encoding, bracket and dot notation for nested keys, and array support β free and 100% in-browser.
Table of Contents
Every web developer eventually faces the same tedious job: you have a JSON object full of parameters, and you need it as a URL query string β correctly encoded, with nested keys and arrays intact. Doing it by hand invites bugs: forgotten & separators, unencoded spaces, mangled brackets, and array values that silently break your API call. The JSON to Query String Converter makes this a one-paste operation: drop in your JSON, get back a production-ready query string.
The tool works in both directions. Convert a JSON object into a query string for building API requests, or paste an existing query string and get clean, formatted JSON back β perfect for debugging that gnarly URL a third-party service sent you. Everything runs 100% in your browser, so payloads, tokens, and internal API parameters never leave your machine.
In this guide, we'll walk through how the converter works, the encoding conventions behind query strings, and the practical situations where converting between JSON and query strings saves you real time.
Why Use the JSON to Query String Converter?
- Correct percent-encoding, every time. The tool runs every key and value through encodeURIComponent, so spaces become %20, brackets become %5B/%5D, and Unicode characters are safely encoded. No more guessing which characters are URL-safe.
- Nested object support. Deeply nested JSON like {"filters": {"status": "active"}} becomes filters[status]=active using bracket notation by default, or filters.status=active with dot notation β you choose with a toggle.
- Arrays handled properly. Array values can be emitted as repeated keys (tags=dev&tags=json) or bracket notation (tags[]=dev&tags[]=json), matching whatever convention your backend expects.
- Bidirectional conversion. Paste a query string and the tool parses it back into JSON, promoting repeated keys into arrays and decoding percent-encoded values β a lifesaver when debugging URLs.
- Zero data exposure. All conversion happens client-side in your browser. Sensitive request payloads never touch a server, which matters when you're working with internal APIs or authenticated endpoints.
- Copy and download built in. One click copies the result to your clipboard, or downloads it as querystring.txt / query.json for your test suite or documentation.
Key Features
| Feature | What it does |
|---|---|
| Bidirectional mode | JSON β query string, or query string β JSON |
| Bracket notation | Nested keys serialize as a[b][c]=1 (default) |
| Dot notation toggle | Nested keys serialize as a.b.c=1 |
| Repeated array keys | Arrays serialize as a=1&a=2 (toggleable) |
| Skip null/undefined | Optionally drop null and undefined values entirely |
| Percent-encoding | All keys and values passed through encodeURIComponent |
A few details worth calling out. The reverse conversion preserves fidelity: the parser deliberately keeps values as strings rather than coercing numbers and booleans, so a round-trip JSON β query β JSON gives you back exactly what you started with. The skip-nulls option is handy for optional API parameters β instead of sending referrer=null, the key simply disappears from the query string. And an example loader button fills the input with a representative nested JSON object so you can see the conventions in action immediately.
How to Use the Tool
- Open the JSON to Query String Converter β no signup, no install, works on any modern browser.
- Choose your direction with the tab switcher: "JSON β Query String" or "Query String β JSON".
- Paste your JSON object (or query string) into the input panel, or click the example button to load a sample with nested objects and arrays.
- Configure the options: dot notation for nested keys, repeated keys for arrays, and whether to skip null/undefined values.
- Copy the generated result to your clipboard, or download it as a file for reuse in tests, docs, or Postman collections.
Understanding Query String Encoding
Query strings look simple, but the conventions for representing structured data inside them vary across ecosystems. Knowing which one your backend speaks is the difference between parameters that parse and parameters that arrive as garbage.
Percent-encoding is the foundation. Only a small set of characters is URL-safe; everything else β spaces, non-ASCII letters, ", {, }, [, ] β must be encoded as %XX hex sequences. JavaScript's encodeURIComponent encodes everything except A-Z, a-z, 0-9, -, _, ., !, ~, *, ', (, ). That's why filters[status] in a value shows up as filters%5Bstatus%5D. The tool applies this encoding to every key and value automatically.
Bracket notation (a[b][c]=1) is the dominant convention for nested structures. It's what PHP's $_GET parsing, Rails' Rack::Utils.parse_nested_query, and the popular qs library in Node.js all understand natively. If your backend is Laravel, Express with qs (the default in Express 4+), Spring Boot, or Django, bracket notation is almost always the right choice:
{
"user": { "name": "Ana", "role": "admin" },
"page": 2
}
user[name]=Ana&user[role]=admin&page=2
Dot notation (a.b.c=1) is less common on the server side but appears in some APIs and logging systems. It reads more like a property path, which makes it popular for feature-flag systems and flat configuration keys. Toggle it on when your consumer expects path-style keys:
user.name=Ana&user.role=admin&page=2
Arrays have two widely used encodings. Repeated keys (tags=dev&tags=json) are the classic form understood by virtually every server framework β PHP, Express, Flask, and Go all aggregate duplicates into a list. Bracket-suffix keys (tags[]=dev&tags[]=json) originated in PHP and are also parsed by Rails and qs, but can confuse frameworks that don't expect the empty brackets. When in doubt, repeated keys are the safer, more portable choice.
One subtlety the tool handles correctly: on the reverse trip, a value like page=2 comes back as the string "2", not the number 2. That's intentional β the query string format carries no type information, and coercing types would corrupt round-trips. Parse and validate types on the consuming side.
Practical Use Cases
Building and testing API requests
REST APIs frequently require complex filter parameters in the URL. Suppose you're testing an endpoint that accepts pagination, sorting, and filters:
{
"page": 2,
"per_page": 25,
"sort": "-created_at",
"filters": { "status": "active", "tier": "premium" }
}
Paste that into the converter and you instantly get:
page=2&per_page=25&sort=-created_at&filters[status]=active&filters[tier]=premium
Append it to your endpoint URL, fire the request, and you're testing in seconds instead of hand-assembling the string.
Sharing application state via URL
Data tables, dashboards, and search pages are far more useful when their state lives in the URL β users can bookmark, share, and refresh without losing their place. Serialize your filter state as JSON, convert it to a query string, and push it into the URL with the History API. When the page loads, reverse the conversion to rebuild the state object. The bidirectional design of this tool lets you prototype both directions before writing a single line of app code.
Debugging and logging HTTP calls
A log line or bug report gives you a monster URL like search?q=user%20management&facets%5B%5D=docs&facets%5B%5D=api&debug=true. Paste it into the reverse mode and you get readable JSON that shows exactly what parameters were in play β decoded, structured, and easy to reason about. This is also handy when reviewing webhook callbacks or OAuth redirect URLs.
Frontendβbackend contract work
When frontend and backend teams agree on request parameters, a shared example helps both sides. The converter turns a JSON example from the API docs into the exact query string the frontend should produce β and vice versa. Because encoding is deterministic, both teams can verify their implementations against the same output.
Best Practices
- Always encode keys and values. Never hand-concatenate user input into a URL. Let encodeURIComponent (or this tool) handle it β unencoded &, =, or # characters will silently corrupt your parameters.
- Keep URLs under length limits. Browsers handle ~2,000 characters safely; some servers reject URLs over 4,000β8,000. If your JSON is large, consider POST with a JSON body instead of a query string.
- Never put sensitive data in query strings. URLs are logged by servers, proxies, browsers, and analytics tools. Tokens, passwords, and personal data belong in headers or request bodies β not in ?api_key=....
- Prefer repeated keys over comma-joined values. tags=dev&tags=json is unambiguous and natively parsed by every framework; tags=dev,json requires custom splitting and breaks when values contain commas.
- Validate and type-coerce on the server. Query strings carry no type information β everything arrives as a string. Convert "2" to an integer and validate enum values on the consuming side before use.
- Round-trip to verify. Convert JSON β query string β JSON and compare. If anything changed, your notation settings don't match what your parser expects.
Start Converting JSON to Query Strings Today
Hand-writing query strings is a solved problem β stop doing it. Paste your JSON into the JSON to Query String Converter, pick your notation, and get a correctly encoded URL in milliseconds. Because it runs entirely in your browser, it's safe for internal payloads and instant to use, with copy and download ready for whatever comes next.
Related Tools You Might Like
- URL Encoder β encode or decode individual strings when you just need one value escaped
- URL Parser β break any full URL into scheme, host, path, and query components
- JSON to YAML Converter β transform JSON into YAML for config files and CI pipelines
Happy converting!