Nested JSON to Table Mapper — Recursive Flatten to Dot-Notation Columns (JS)

APIs almost never return flat data — a "user" object nests an "address," an order nests line items, and a table needs flat columns. This snippet builds a real recursive flattening function that walks arbitrarily nested JSON and produces dot-notation columns like user.address.city, then renders both the raw source and the flattened result — in plain HTML, CSS, and vanilla JavaScript, no library.

Real recursion, not a fixed number of levels

flatten(obj, prefix, out) calls itself whenever it encounters a nested plain object, appending the current key to a dot-joined prefix and recursing into the child object with that longer prefix. Because it's genuine recursion rather than two or three hardcoded obj.a.b accesses, it flattens objects nested to *any* depth — user.address.city works the same way user.address.geo.lat would if that level existed, with zero extra code.

Handling arrays two different ways

Arrays need their own rule, since "flatten an array" is ambiguous. This implementation checks whether every array element is a primitive: if so (like tags: ['vip', 'wholesale']), it joins them into one readable comma-separated cell rather than exploding them into columns. If the array holds objects, each element is recursively flattened under an indexed path (items.0.sku, items.1.sku), reusing the exact same flatten() call rather than a separate code path — so nested arrays-of-objects flatten correctly too.

A stable column set across heterogeneous rows

Because different records can have different nested shapes (one order has tags, another has none), flattenAll() collects the *union* of every flattened key across all rows into one ordered columns array, and any row missing a given column renders a dash. This is the detail that makes the table usable for real-world JSON, where not every record populates every optional nested field.

Raw JSON and flattened table, side by side

A tab control toggles between a split view (JSON on the left, the flattened table on the right), JSON-only, and table-only — so you can trace exactly which nested value produced which dot-notation column and cell. This traceability is what makes the tool useful for debugging an API response, not just for display.

A generic utility, not display-only

flatten() and flattenAll() are plain functions that return data (a { columns, rows } shape) — they don't touch the DOM. That means the same flattening logic works for CSV export (feed columns/rows into the escaping logic from a CSV export table) or for building a searchable data table on top of arbitrary nested JSON, not just this demo's read-only view.