Flatten JSON in JavaScript — Free Online Tool vs lodash, flat, and Custom Code

JavaScript does not have a built-in function for flattening nested JSON objects into dot-notation keys. Developers usually reach for lodash, the flat npm package, or a custom recursive function copy-pasted from Stack Overflow. All three work fine. None of them are necessary if you only need to flatten something once to look at it — our JSON Flattener does it in the browser without any install.

This post compares the three code approaches, explains when each is the right choice, and shows where the browser tool replaces them cleanly.

Approach 1 — Lodash

Lodash does not have a direct flatten for objects (its _.flatten is for arrays). For object flattening, you typically use _.toPairs, _.set, or write a small recursive helper. A common snippet:

import _ from 'lodash';

function flattenObj(obj, parent = '', res = {}) {
  _.forIn(obj, (val, key) => {
    const path = parent ? parent + '.' + key : key;
    if (_.isPlainObject(val)) flattenObj(val, path, res);
    else res[path] = val;
  });
  return res;
}

When to use it: You already have lodash in your project (common in older codebases), and you want utility-style code that matches the rest of your imports. Do not install lodash just for this — it is 70KB+ for one function.

Approach 2 — The flat npm Package

The flat package is purpose-built for this. It is small, widely used, and handles edge cases:

import { flatten, unflatten } from 'flat';

const nested = { user: { name: 'Alice', address: { city: 'NY' } } };
const flat = flatten(nested);
// { 'user.name': 'Alice', 'user.address.city': 'NY' }

const back = unflatten(flat);
// original nested structure

You can configure delimiter, max depth, and array handling. Package is ~10KB, well-maintained, has 8M+ weekly downloads.

When to use it: Production Node or browser code where you need flatten/unflatten functionality repeatedly. The right choice for a data pipeline or API that handles flat payloads.

Sell Custom Apparel — We Handle Printing & Free Shipping

Approach 3 — Custom Recursive Function

The zero-dependency option:

function flatten(obj, prefix = '', res = {}) {
  Object.keys(obj).forEach(key => {
    const path = prefix ? prefix + '.' + key : key;
    const val = obj[key];
    if (typeof val === 'object' && val !== null && !Array.isArray(val)) {
      flatten(val, path, res);
    } else {
      res[path] = val;
    }
  });
  return res;
}

Under 15 lines. No dependencies. Handles the common case cleanly — nested objects become dot paths, arrays preserved as leaves.

When to use it: Small project, no existing utility libraries, and you do not want to introduce a dependency. Also when you need custom behavior — for example, treating certain nested objects as leaves based on a type check.

When the Browser Tool Replaces All Three

Before you write npm install flat or _.forIn, ask: how many times am I actually going to flatten JSON in this session?

Once. Paste into the JSON Flattener. 10 seconds. Done.

A few times during debugging. Keep the tool open in a tab. Every paste takes 2 seconds. Faster than rebuilding your node_modules.

Every request your app handles. Install flat. You need production-grade, tested code running at scale — browser tools are not designed for that.

As part of a build step or tool config. Install flat. Your CI pipeline cannot use a browser tool.

The rule: the browser tool is for humans processing payloads. Libraries are for code processing payloads.

TypeScript Considerations

Flattening loses type information at the dot-notation key level. TypeScript cannot know that "user.address.city" is a valid path into your original type without complex template literal type magic.

If you need typed flat keys, look at the type-fest package (Paths<T>) or roll your own recursive type. For runtime-only flattening where types do not matter (logging, debug output, analytics events), any of the three approaches above work without type gymnastics.

For generating full TypeScript interfaces from nested JSON, use our JSON to TypeScript generator — it reads the nested structure and produces typed interfaces, which is usually more useful than typing flat keys.

Frequently Asked Questions

Is the flat npm package still maintained?

Yes. flat has been downloaded 8+ million times weekly for years, used by major libraries, and receives regular updates. It is one of the most reliable small utility packages in the JS ecosystem.

Can I use the browser tool in a Node.js build script?

No — it is a browser UI, not a CLI. For Node scripts, install the flat package or write a small recursive function. The browser tool is for human-in-the-loop use.

Does lodash have a built-in object flattener?

No. Lodash _.flatten works on arrays, not objects. For object flattening, you either combine several lodash functions, use a helper, or use the flat package instead.

How does Object.keys().reduce() compare to a for loop for flattening?

Negligibly different in speed for typical object sizes. Reduce is more idiomatic modern JavaScript; for loops are slightly faster for huge payloads but the difference is microseconds. Pick whichever is more readable to your team.