DEV Community

Cover image for Javascript: Convert nested JSON to simple JSON

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...
Collapse
 
msabir profile image
imsabir

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)
)
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh

That so cool. Thanks. Helpful to many :)

Collapse
 
ftonato profile image
Ademílson F. Tonato • 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],
   },
}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh • Edited

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

Collapse
 
tylim88 profile image
Acid Coder • Edited

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

npmjs.com/package/object-flat

flatten

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh

Thatz so cool. Superb.

Collapse
 
mattthecuber profile image
MattTheCuber

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

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh

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

Thank you.

Collapse
 
mattthecuber profile image
MattTheCuber

Also, this doesn't account for duplicate keys

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh • Edited

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

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh

Good One. Great work.

Collapse
 
jeffwildesunrun profile image
jeff-wilde-sunrun