UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

JSON Flatten / Unflatten

Toggle between nested JSON objects and dot-notation flat objects. Custom delimiter, array index handling, browser-only.

About JSON Flatten / Unflatten

JSON Flatten / Unflatten is a bidirectional converter between two representations of the same data: a nested JSON object, and a flat object whose keys encode the path to each leaf value using dot notation. Flattening turns {user: {address: {city: 'Paris'}}} into {"user.address.city": "Paris"} — useful for feature flag stores, environment variable templates, or i18n translation tables that only accept key-value maps. Unflattening reverses the process for reading dot-notation config back into application objects. The tool supports custom delimiters (for keys that contain dots), two strategies for array indexes ([n] bracket notation or n delimiter), and quoted segments for keys that contain the delimiter character. All processing runs in your browser, so secret config values stay local.

Why use JSON Flatten / Unflatten

  • Bidirectional Conversion: Flatten nested JSON for systems that only accept key-value maps, then unflatten back when consuming the data in application code — round-trips preserve structure exactly.
  • Custom Delimiter: Default is dot but any single character works. Use / for path-style keys or _ when keys contain dots already, avoiding ambiguity in naming conventions.
  • Array Index Strategies: Choose between [n] bracket notation (a[0].b) which mirrors JavaScript syntax, or pure delimiter style (a.0.b) which works in tools that strip brackets.
  • Quoted Segment Support: Keys containing the delimiter character are emitted with double quotes around the segment, so flattening is reversible even with awkward source key names.
  • i18n Translation Friendly: The flat dot-notation output matches the format expected by i18next, react-intl, and most translation management systems — no manual reshaping required.
  • Browser-Local: Configuration values, feature flags, and translation strings stay in your browser. Nothing is uploaded, logged, or transmitted.

How to use JSON Flatten / Unflatten

  1. Pick a delimiter character — the default is . (dot) but you can use / for path-style or any single character.
  2. Paste a nested JSON object into the input panel.
  3. Click Flatten → to produce a flat key-value map where keys encode paths through the original structure.
  4. Toggle Use delimiter for array indexes if you prefer a.0.b output instead of a[0].b for arrays.
  5. Click ← Unflatten to reverse the process: paste a flat map and recover the nested structure.
  6. Copy the result and use it directly in feature flag UIs, env files, or i18n translation pipelines.

When to use JSON Flatten / Unflatten

  • Preparing nested config for a feature-flag platform like LaunchDarkly that only accepts flat key-value maps.
  • Building i18n translation tables in dot notation (en.dashboard.title) from a nested locale file.
  • Converting a deeply nested API response into a flat row for CSV export or analytics warehouses.
  • Comparing two JSON values by key path: flatten both sides and diff the flat maps.
  • Templating environment variables (DB.HOST, DB.PORT) from a nested config object.
  • Restoring a nested application config from a flat .env or .properties file.

Examples

Flatten nested object

Input: {"user":{"name":"Alice","address":{"city":"Paris","zip":"75001"}}}

Output: { "user.name": "Alice", "user.address.city": "Paris", "user.address.zip": "75001" }

Flatten with array indexes

Input: {"items":[{"id":1,"qty":2},{"id":2,"qty":5}]}

Output: { "items[0].id": 1, "items[0].qty": 2, "items[1].id": 2, "items[1].qty": 5 }

Unflatten dot-notation map

Input: {"user.name":"Alice","user.age":30}

Output: { "user": { "name": "Alice", "age": 30 } }

Tips

  • When keys contain dots (e.g. version numbers like "1.0.0"), switch to a different delimiter like / to avoid ambiguity in flat output.
  • Bracket notation a[0] is human-friendly and matches JavaScript; dot notation a.0 is friendlier for tools that strip square brackets in URLs.
  • Empty objects {} and empty arrays [] flatten to themselves at the leaf — they are not lost in conversion.
  • Keys that contain the delimiter are wrapped in double quotes in the flat output, so unflatten can reconstruct them correctly.
  • For very deep structures, prefer flatten + diff over JSON.stringify diff — flat key paths make changes far easier to read.

Frequently Asked Questions

Is the conversion lossless and reversible?▾
Yes — flattening followed by unflattening (with the same delimiter and array setting) produces a deep-equal copy of the original. Empty objects, empty arrays, null values, and boolean primitives are all preserved.
What happens if a key contains the delimiter character?▾
That segment is wrapped in double quotes in the flat output, e.g. {"version":{"1.0.0":true}} flattens to {"version.\"1.0.0\"":true}. The unflatten step recognises the quotes and reconstructs the original key.
How are arrays handled?▾
By default arrays use bracket notation: items[0].name. Toggle the array option to use the delimiter instead: items.0.name. Both round-trip correctly back to arrays during unflatten.
Will it handle very deeply nested objects?▾
Recursion uses the JavaScript call stack, so practical depth is around 1000 levels in modern browsers. Nesting beyond that is extremely rare in real-world data and would indicate cyclic references.
Are duplicate keys preserved?▾
JSON does not allow duplicate keys at the same level — JSON.parse keeps the last value. After flattening, every key is unique by construction since paths are unique.
Is my data sent anywhere?▾
No. The flatten and unflatten algorithms are pure JavaScript recursion running in your browser. Configuration values, secrets, and feature-flag data stay entirely local.
Can I unflatten into an array at the top level?▾
Yes — if the top-level keys are integer indexes (or [0], [1], etc.), unflatten produces a top-level array instead of an object. Mixed numeric and string keys produce an object.
How do I handle keys that already use dots, like version numbers?▾
Switch the delimiter to a character that does not appear in your keys — slash / or pipe | are common choices. The keys are then unambiguously parseable on the unflatten step.

Explore the category

JSON Repair Fix broken JSON: trailing commas, unquoted keys, single quotes, comments, smart quotes, and missing brackets — automatically. JSON Diff Compare two JSON values structurally. See added, removed, and changed keys with color-coded paths and values. JSON to SQL Converter Convert a JSON array of objects into INSERT statements with type-inferred CREATE TABLE. PostgreSQL, MySQL, SQLite. JSON Formatter Format, validate and minify JSON JSON ↔ YAML Convert between JSON and YAML formats CSV ↔ JSON Convert between CSV and JSON formats
JSON Basics and Syntax: A Complete Beginner's Guide JSON is the lingua franca of modern web APIs, but its deceptively simple syntax trips up beginners in subtle ways. This guide walks through Jan 2026 · 8 min XML vs JSON: Which Format to Use and When JSON took over the web API world, but XML still powers enterprise integrations, configuration files, and document formats. Here is a clear-e Mar 2026 · 8 min How to Read and Write JSONL (JSON Lines) — The Streaming Format JSONL puts one JSON object per line, making it streamable, appendable, and easy to process without loading the entire file into memory. Here Mar 2026 · 7 min

Glossary

Dot notation
A flat key syntax where path segments are joined by dots, e.g. user.address.city. The default flatten output format and the convention used by i18next, lodash.get, and most config systems.
Bracket notation
A path syntax that uses square brackets for array indexes, e.g. items[0].name. Preserves the visual distinction between object keys and array indexes — easier to read for mixed structures.
Path
The sequence of keys and indexes from the root of a JSON value to a leaf. Flattening converts every leaf into a key-value pair where the key is the stringified path.
Delimiter
The character used to separate path segments in flat keys. Dot is conventional but any character works as long as it does not collide with characters in the source keys.
Round-trip
The property that flatten followed by unflatten produces the original value (and vice versa) without data loss. Achieved here through quoted segments and bracket-notation arrays.
Leaf
A value in the JSON tree that is not itself an object or array — strings, numbers, booleans, and null. Flattening produces one flat key per leaf.