Advertisements

headerup to 320x100 / 728x90

JSON Flatten

Flatten nested JSON into single-level key/value pairs using dotted or custom separator paths

Separator:
Input
Loading editor...
Output

Output will appear here...

Advertisements

content bottomup to 300x250

What is JSON Flatten

Last reviewed:

JSON (JavaScript Object Notation) is a lightweight, human-readable data format used almost everywhere on the web for APIs, config files, and log output.

JSON Flatten converts nested JSON into a single-level map where each key is a dotted path plus bracketed array indices (`users[0].tags[1]`).

It's perfect for diffing complex payloads, feeding configuration into flat key/value stores, and building query strings from nested structures.

Why use it

  • Diff two JSON payloads key-by-key.
  • Feed nested config into flat KV stores.
  • Build dotted query strings.
  • Compare API responses across versions.
  • Simplify Jq-style path navigation.

Features

  • Dot or custom separator
  • Bracketed array indices
  • Preserves empty containers
  • Reversible with Unflatten
  • JSON Flatten is handled entirely in-browser

How to use JSON Flatten

  1. Paste JSON. Nested object or array-of-objects.
  2. Set separator. Default `.` or choose your own.
  3. Run. Copy the flat map.

Example (before/after)

Nested JSON

{
  "user": { "id": 1, "tags": ["admin", "ops"] }
}

Flat JSON

{
  "user.id": 1,
  "user.tags[0]": "admin",
  "user.tags[1]": "ops"
}

Common errors

Empty containers

Empty objects/arrays flatten to `{}` / `[]`.

Fix: This is expected — preserves structure for unflatten.

Keys containing dots

A key like `user.name` will be ambiguous.

Fix: Use a custom separator like `/` via the toolbar.

FAQ

Is it reversible?

Yes — use JSON Unflatten with the same separator to rebuild.

What separator is used?

Dot by default; change via the toolbar.

How are arrays represented?

With bracketed numeric indices, e.g. tags[0].

Does it handle deeply nested JSON?

Yes — there's no recursion limit in practice.

Is input uploaded?

No — flattening is client-side.