JavaScript: flattening a JSON

In this tutorial we will learn how to flatten a nested JSON object using the flat library.

Introduction

In this tutorial we will learn how to flatten a nested JSON object using the flat library.

When flattening an object, we will obtain a new object with one level deep, regardless of how nested the original object was [1].

In the flattened object, the property names will correspond to the full path of each property in the original object. For example, let’s assume that we have the object below and flatten it:

{
   "prop1": {
       "nestedProp1": "nestedVal1",
       "nestedProp2": "nestedVal2"
   }
}

The output would be:

{ 
   "prop1.nestedProp1": "nestedVal1",
   "prop1.nestedProp2": "nestedVal2" 
}

So, the final object is only one level deep and each property name now corresponds to the full path of the property.

This means that we still have the information about the structure of the original object but if we wanted to iterate through all the leaves of the JSON it would be much simpler.

Note that arrays will also be flattened. In this case, each element of the array will be mapped to a different property in the final object and the path will contain a number corresponding to the position in the array. Let’s assume that we have the object below:

{
    "array": ["a", "b"]
}

The output would be:

{ 
    "array.0": "a", 
    "array.1": "b" 
}

The code

We will start by importing the flatten function from the flat package we have just installed.

const flatten = require('flat').flatten;

After that we will define a JavaScript object with some properties that we will use to flatten. It’s a testing data structure that could represent some information of a person. Naturally this object will be a representation of the JSON we want to flatten.

This object will have two properties without any nesting: name and age. In the flattened object, these should keep the original format.

We will also have a property that corresponds to an array of strings called favouriteCountries. The behavior should be similar to what was described in the introductory section.

We will also have two nested properties. One will be called address and will only be one additional level deep. We will also have a nested object called nestedObject that will be 4 levels deep, just to illustrate a more complex scenario.

const obj = {
   name: "John",
   age: 10,
   address: {
       street: "Street 1",
       postalCode: "7557-40"
   },
   favouriteCountries: ["Portugal", "Spain"],
   nestedObject: { x: { y: { z: {w: "property" } } } }
}

Then we will call the flatten function, passing as input our original object. As output, this function will return the flattened object, which we will directly print to the console.

console.log(flatten(obj));

The final code can be seen below.

const flatten = require('flat').flatten;
 
const obj = {
   name: "John",
   age: 10,
   address: {
       street: "Street 1",
       postalCode: "7557-40"
   },
   favouriteCountries: ["Portugal", "Spain"],
   nestedObject: { x: { y: { z: {w: "property" } } } }
}

console.log(flatten(obj));

Testing the code

To test the code, simply run it in a tool of your choice. In my case I’m using Visual Studio Code with the Code Runner extension.

You should obtain a result similar to figure 1. As can be seen, the original object was flattened, accordingly to what was described in the introductory section.

Note that the default delimiter for the path is “.”, but it can be changed to a custom one, as documented here.

Additionally, it’s important to mention that flattening is reversible [1]. You can also reverse with the flat package we are using, as can be seen here.

References

[1] https://www.npmjs.com/package/flat