{ } JSON Workbench0 network requests. Check DevTools

"Flatten JSON":{ }

Flatten JSON collapses nested objects and arrays into a single-level map of path → value. Nested keys join with dots (a.b.c); array items use bracket indexes (items[0].sku). Paste JSON, get flat key-value pairs instantly. 100% in-browser, nothing uploaded, reversible via unflatten.

What is JSON flattening?

JSON flattening collapses nested objects and arrays into a single-level map of path → value. Nested object keys join with dots (a.b.c); array items use bracket indexes (items[0].sku). The inverse operation, unflatten, rebuilds the nested tree from those path keys.

Flat structures turn deeply nested API responses, config files, and event payloads into an easy-to-store map. They map cleanly to CSV columns, feed analytics pipelines, drop into key-value stores, and hand off nicely to translators for localization files. Everything runs client-side; nothing is uploaded.

Edge cases & gotchas

  • Nested arrays use [index], not .0: output is items[0].sku, keeping the array-vs-object distinction explicit and unambiguous for round-tripping.
  • Keys containing dots collide with the separator and can break unflatten, making it a one-way operation.
  • Empty objects {} and empty arrays [] have no leaf values, so they produce no output key and can vanish on round-trip.
  • Large arrays flatten to very wide output (thousands of [n] keys).
  • Deep nesting (20+ levels) yields long path keys that may exceed downstream DB column-name limits.
  • Repair-aware parsing flattens even lightly malformed JSON (trailing commas, single quotes) that strict parsers reject.

Path notation reference

Input structureFlattened keyNotation
{"a": {"b": 1}}a.bdot for nested object
{"a": {"b": {"c": 1}}}a.b.cchained dots, deep nesting
{"tags": ["x","y"]}tags[0], tags[1][index] for array items
{"items": [{"sku": "A1"}]}items[0].skuarray of objects
{"a": {}}(no key)empty object drops out
{"a": []}(no key)empty array drops out

How to use

  1. Paste or type your nested JSON into the Input pane.
  2. Output flattens automatically: each key is the full dot/bracket path to its value.
  3. Optionally pick a different delimiter if your keys already contain dots.
  4. Copy the flat result, or switch to unflatten to rebuild the nested structure.
  5. Verify privacy: open DevTools → Network and watch zero requests fire.

Examples

Nested object → dot notation

Input
{ "user": { "name": "Alice", "address": { "city": "Boston" } } }
Output
{ "user.name": "Alice", "user.address.city": "Boston" }

Nested arrays → [index] brackets (edge case)

Input
{ "order": { "items": [ { "sku": "A1" }, { "sku": "B2" } ] } }
Output
{ "order.items[0].sku": "A1", "order.items[1].sku": "B2" }

Deep nesting + scalar array

Input
{ "post": { "tags": ["api", "json"], "meta": { "views": 12 } } }
Output
{ "post.tags[0]": "api", "post.tags[1]": "json", "post.meta.views": 12 }

FAQ

What does flattening JSON do?

It converts a nested structure into a single-level object where each key is the full path (e.g. a.b[0].c) to a leaf value.

How are arrays flattened?

Array elements become bracket-indexed paths (tags[0], items[1].sku), preserving order and position.

Can I unflatten it back?

Yes. Unflatten reverses the operation, reconstructing nested objects and arrays from the path keys.

What delimiter is used?

Dot (.) for object keys plus [index] brackets for arrays. Dot is the de-facto standard; there's no universal spec.

What if my keys already contain dots?

Dots inside key names collide with the path separator and can make flattening one-way. Choose a different delimiter or unflatten carefully.

Is my data uploaded anywhere?

No. Flattening runs entirely in your browser, with zero network requests, verifiable in DevTools.

Related tools