Query String to JSON & Back — Guide

Query String to JSON: Complete Guide

Query strings are the portion of a URL after the ? symbol that carries data in key=value pairs separated by & characters. This guide explains how to parse and convert query strings into JSON format—a common need for developers, API testers, and anyone debugging URL parameters. Whether you need to inspect incoming form data, debug API requests, or reconstruct URLs programmatically, understanding this conversion is essential for working with web technologies.

The Underlying Format: Query Strings Explained

A query string is a standardized way to encode data within a URL. The format is defined by the application/x-www-form-urlencoded specification, and it follows specific rules that every developer should understand:

Structure: Each parameter consists of a key-value pair joined by an equals sign (=). Multiple pairs are separated by ampersands (&).
URL Encoding: Special characters must be percent-encoded (URL-encoded). For example, a space becomes %20 or +, and special symbols like &, =, or # become their hex equivalents (%26, %3D, %23).
Keys and Values: Both keys and values are treated as strings. Numeric-looking values remain strings unless explicitly converted by your code.
Empty Values: A parameter with no value (like debug=) results in an empty string. A bare key without equals sign (like debug) typically results in an empty string or null depending on the parser.
Repeated Keys: The same key can appear multiple times (e.g., tag=apple&tag=banana). Standard query strings don't natively support arrays—encoding arrays requires conventions like tags[]=apple&tags[]=banana.
UTF-8 Encoding: Modern query strings should use UTF-8 encoding. Non-ASCII characters are percent-encoded using their UTF-8 byte sequences.

The query string begins after the ? character in a URL. For example, in https://example.com/search?q=javascript&page=1, the query string is q=javascript&page=1.

Verified Worked Example

Below is a real example demonstrating the exact transformation from query string format to JSON output:

Input (Query String)

a=1&b=2

Output (JSON Object)

{
"a": "1", "b": "2" }

Notice that the values 1 and 2 appear as strings in the JSON output ("1" and "2"). This is intentional—query strings are text-based, and the JSON representation preserves the original string format. If you need numeric values, you'll need to parse them after conversion.

More Complex Examples

With URL Encoding:

Input:  name=John%20Doe&city=San%20Francisco
Output: { "name": "John Doe", "city": "San Francisco" }

With Repeated Keys (Array-like):

Input:  colors=red&colors=blue&colors=green
Output: { "colors": ["red", "blue", "green"] }

With Nested Objects (PHP-style):

Input:  user[name]=Alice&user[age]=30
Output: { "user": { "name": "Alice", "age": "30" } }

Common Mistakes and How to Fix Them

1. Forgetting to URL-Encode Special Characters

Problem: Trying to include literal & or = in values without encoding breaks parsing.
Example: message=Hello&World is parsed as two separate parameters instead of one.
Fix: Encode special characters. message=Hello%26World is correctly interpreted as { "message": "Hello&World" }.

2. Confusing Empty Strings with Missing Values

Problem: param=&other=value creates { "param": "", "other": "value" } but some developers expect the key to be omitted.
Fix: Decide on your parsing behavior. If you want to skip empty values, filter them out after conversion: Object.fromEntries(Object.entries(obj).filter(([k,v]) => v !== '')).

3. Not Handling Numeric Conversion

Problem: count=42 becomes { "count": "42" }—a string, not a number.
Fix: If you need typed values, post-process the JSON: check if each value matches /^\d+$/ and parse integers, or use a library that supports type coercion.

4. Ignoring Unicode Characters

Problem: Characters like é, ñ, or emojis may break or display incorrectly if not properly encoded.
Fix: Always use UTF-8 encoding. name=J%C3%A9r%C3%B4me correctly becomes { "name": "Jérôme" }.

5. Missing the Question Mark

Problem: Copying ?a=1&b=2 including the ? and trying to parse it as a query string.
Fix: The ? is a delimiter, not part of the query string data. Strip it before parsing, or use the portion after ? only.

When and Why to Use a Query String to JSON Converter

Debugging API Requests

When inspecting network traffic or API calls, query parameters arrive as encoded strings. Converting them to JSON lets you read the data structure clearly. Instead of squinting at user_id=12345&session=abc&action=update, you see { "user_id": "12345", "session": "abc", "action": "update" }.

Building Dynamic URLs

Sometimes you need to construct URLs programmatically. Starting with JSON (an object you already have in your code) and converting it to a query string is often easier than string concatenation. This is especially true when dealing with optional parameters—you can build the object piece by piece and serialize it at the end.

Testing Web Applications

Manual testers often need to modify URL parameters to trigger different application states. A converter lets you quickly take a JSON configuration and apply it to a URL, or extract the current URL's parameters into readable JSON for documentation or sharing.

Data Migration and Transformation

When moving data between systems that use different formats—some sending data as query parameters, others expecting JSON—you need reliable conversion. A tool that handles both directions (query string to JSON and JSON to query string) is essential for ETL pipelines and data transformation scripts.

Learning and Teaching

If you're learning about web development, visualizing how query strings map to data structures helps cement the concept. Seeing the transformation in real-time with your own examples accelerates understanding.

Try the Tool

Query String to JSON & Back

Frequently Asked Questions

Is this tool free to use?

Yes, the Query String to JSON tool at calabilabs.com/tools/query-string.html is completely free with no sign-up required. All processing happens locally in your browser—your data is never uploaded to any server, ensuring privacy and fast performance.

Why are my numeric values showing as strings in the JSON output?

This is correct behavior. Query strings are a text-based format—there's no native way to distinguish 42 (a number) from 42 (a string). The JSON standard preserves the original text representation. If you need typed values (numbers, booleans), you'll need to post-process the JSON in your code. For example, you could write a function that attempts numeric conversion on values that match /^-?\d+(\.\d+)?$/.

Can I convert JSON back to a query string?

Yes, the tool supports bidirectional conversion. You can take a JSON object like { "page": 1, "limit": 20 } and convert it back to page=1&limit=20. Note that when converting JSON to query strings, nested objects may be flattened using bracket notation (e.g., user[name]=Alice) or serialized differently depending on the implementation. Verify the output matches what your target system expects.

Use the tool → Query String to JSON & Back — free, in your browser, nothing uploaded.