DEV Community

Javascript: Convert nested JSON to simple JSON

Kurapati Mahesh on February 27, 2022

This will be the very much used utility function we almost regularly use. Depends on the data variety & structuring of data, API response can...

Read full post

imsabir • Feb 28 '22

You can also use the spread operator for this:

Object.assign(
  {}, 
  ...function _flatten(o) { 
    return [].concat(...Object.keys(o)
      .map(k => 
        typeof o[k] === 'object' ?
          _flatten(o[k]) : 
          ({[k]: o[k]})
      )
    );
  }(obj)
)

Explanation:
Recursively create an array of one-property objects, then combine them all with Object.assign.

This uses ES6 features including Object.assign or the spread operator, but it should be easy enough to rewrite not to require them.

*Spread Operator: *
The JavaScript spread operator ( ... ) allows us to quickly copy all or part of an existing array or object into another array or object.

For more: @msabir

Kurapati Mahesh • Feb 28 '22

That so cool. Thanks. Helpful to many :)

Ademílson F. Tonato • Mar 2 '22 • Edited

Hello @urstrulyvishwak, thanks for sharing with us one of your real problems and also the solution you used.

The only time I needed something like this I used flattie, but it actually does a few different things than the solution you presented, and I understand that everything is born out of necessity.

Thinking about this very specific scenario that you brought us, I decided to create my own solution, and with it I added some things that your method doesn't handle and that can generate errors.

A simple example of a problem you might have is if you have a value that is of type Array, for example:

{
   one: {
     one: [1, 2, 3],
   },
}

Therefore, my solution to the problem deals with the following data types:

String
Number
Boolean
Array
Date
Function
Map
Set
BigInt
Symbol
Buffer
Promise

I intend to expand even more as soon as I have some time 🚀

Here's the package: plain-object
11 kB (Minified) / 3.5 kB (Minified + Gzipped) and the repository.

Any suggestion is welcome o/

Thanks again for sharing with us

Kurapati Mahesh • Mar 3 '22 • Edited

Great Idea. Thank you so much. I covered the scenario to capture key values with value as primitive type.

Acid Coder • Feb 28 '22 • Edited

I wrote a npm package that flatten the nested object, it also return accurate typing

npmjs.com/package/object-flat

Kurapati Mahesh • Mar 1 '22

Thatz so cool. Superb.

MattTheCuber • Feb 28 '22

Also, this doesn't account for duplicate keys

Kurapati Mahesh • Feb 28 '22 • Edited

In general, in simple JSON duplicate keys are overridden by latest value. Please have a look at attached.

MattTheCuber • Feb 28 '22

If type is a number, doesn't that make isNaN() useless?

Kurapati Mahesh • Feb 28 '22

NaN is also type of a number. Just avoiding it. That is upto our requirement wheather to include or exclude.

Thank you.

Kurapati Mahesh • Feb 28 '22

Good One. Great work.

jeff-wilde-sunrun • Mar 1 '22

npmjs.com/package/flat