How does a nested object turn into a form field name?

Each level of nesting appends a bracket segment: {"user":{"name":"Ada"}} becomes the single field name user[name], with no leading dot on the first segment, since form field names use bracket notation exclusively, not the dot notation JSON Object Flattener uses.

How are array items represented?

With a numeric bracket segment appended to the path, so roles: ["admin","editor"] becomes two fields, roles[0]=admin and roles[1]=editor, mirroring how PHP, Rails, and many other frameworks parse array-shaped form fields.

Are keys and values both percent-encoded?

Yes, every key segment (including the brackets themselves, which become %5B and %5D) and every scalar value is run through encodeURIComponent, so the result is safe to send as a request body or append to a URL's query string.

What happens to an empty nested object or array?

It's encoded as a field with an empty string value at that path, so its presence is preserved (rather than silently dropped) even though form encoding has no native way to represent an empty container.

JSON to Form Data Converter - Convert JSON to application/x-www-form-urlencoded

Overview

Introduction

Plenty of APIs and HTML forms still expect application/x-www-form-urlencoded bodies rather than JSON, and hand-converting a nested JSON payload into bracket-path form fields is fiddly to get exactly right.

This tool does that flattening and percent-encoding automatically, producing a body string ready to send as-is.

What Is JSON to Form Data Converter?

A converter that requires a top-level JSON object, recursively flattens every nested object and array into a single-level list of bracket-path field names, and percent-encodes both the keys and their scalar values.

The output format matches what a browser produces when it URL-encodes a nested form submission, using the same bracket-path convention PHP, Rails, and Express (with the qs library) all parse.

How JSON to Form Data Converter Works

The tool walks the parsed JSON object recursively: object properties append [key] to the current path (with no brackets on the very first segment), array items append [index], and once a scalar leaf is reached, its full path and value become one key=value pair.

Every pair's key and value both pass through encodeURIComponent (so literal [ and ] become %5B and %5D), and the pairs are joined with & to produce the final body string.

When To Use JSON to Form Data Converter

Use it when an API or form endpoint expects application/x-www-form-urlencoded rather than a JSON request body.

It's also handy for constructing a URL query string from structured JSON data manually.

Often used alongside Form Data to JSON Converter, JSON URL Encoder and JSON Object Flattener.

Features

Advantages

Correctly handles arbitrarily deep nesting of objects and arrays, not just a flat top-level object.
Percent-encodes both keys and values, producing output that's safe to use directly as a request body or query string.
Uses the same bracket-path convention several popular server frameworks already expect for nested form fields.

Limitations

Requires a top-level JSON object; a top-level array or scalar has no natural field-name representation and is rejected.
Empty objects and empty arrays both encode as a single field with an empty string value, so that distinction is lost in the form-encoded output.

Examples

Nested object and array

Input

{"a":1,"user":{"name":"Ada","roles":["admin","editor"]}}

Output

a=1&user%5Bname%5D=Ada&user%5Broles%5D%5B0%5D=admin&user%5Broles%5D%5B1%5D=editor

Nested keys become bracket-path field names, and every key and value is percent-encoded.

Best Practices & Notes

Best Practices

Use Form Data to JSON afterward to confirm a conversion round-trips back to the structure you expect.
Keep deeply nested structures to a minimum if the receiving system has a field-name length or count limit.
Double-check how the receiving framework parses bracket-path field names; not every server library supports arbitrarily deep nesting.

Developer Notes

The flatten() function follows the same recursive path-building shape as JSON Object Flattener's flatten(), but always emits bracket segments (including for the first level) instead of switching between a bare first segment and dot notation for the rest, since form field names have no dot-notation convention to fall back on.

JSON to Form Data Converter Use Cases

Submitting nested JSON data to an API that only accepts application/x-www-form-urlencoded
Building a URL query string from structured JSON for a GET request
Testing how a server-side form parser handles deeply nested bracket-path fields

Common Mistakes

Passing a top-level JSON array instead of an object; the converter needs an object to derive field names from.
Assuming the output is human-readable as-is; the percent-encoded brackets (%5B, %5D) are correct but look unfamiliar until decoded.
Forgetting that an empty nested object or array becomes an empty-string field rather than disappearing entirely.

Tips

Paste the output directly as a fetch/XHR request body with a Content-Type: application/x-www-form-urlencoded header.
Use Form Data to JSON to sanity-check the encoding by converting it back and comparing to your original JSON.

JSON to Form Data Converter