How to Flatten Object in JavaScript

1. Use the concat() Method to Flatten an Object in JavaScript
2. Use the flat() Method to Flatten an Object in JavaScript
3. Use a User-defined Function to Flatten an Object in JavaScript

Generally, a flattened object can also comply with nested structures, but the core motive of flattening is to get such a form with a less complex situation. Mainly, we need to understand the pattern an object is following for our convenience.

In the following sections, we will consider 3 ways of solving this issue. The first and second methods are already simplified structures, which will simplify up to one stage.

Use the concat() Method to Flatten an Object in JavaScript

This example will set an object with an array object, a normal object, and a nested object. We will flatten the entire object with the help of the reduce() method and concat() method.

Object.keys() will return an array with all the other objects inside, and concat() will merge these objects.

var object = {az: 90, 0: [1, 2, 3, 4], x: {a: 'y', b: 'z'}};
result = Object.keys(object).reduce(function(value, key) {
  return value.concat(key, object[key]);
}, []);
console.log(result);

Output:

All the objects are flattened in a single array, and the nested object is a member of that merged array. In the output, you can barely differentiate the prior key-value pairs.

We separated the keys and concatenated them with the values.

Use the flat() Method to Flatten an Object in JavaScript

Here, we will observe a similar object, take_me, to flatten its components. We will use the flat() method to flatten the value of the individual objects of the main object.

So, we will only get the flattened version of the values.

const flatten = (obj) => Object.values(obj).flat();
const take_me = {
  x: [1, 2, 3],
  y: [4, 5, 6, 7],
  z: {xx: 8, yy: 9}
};
console.log(flatten(take_me));

Output:

Use a User-defined Function to Flatten an Object in JavaScript

The user-defined function to retrieve a flattened object is not based on any built-in property or method. A simple conditional statement will decide how to set the key-pair values in the result object.

We will check the objects’ type, and if it is not an array, we will recursively run the flatten function. And also, the result object will take in the simplified key-value pairs.

The code fence has a better preview of the task.

let obj = {
  Company: 'xyz',
  Address: 'aaa',
  contact: 0987654,
  mentor: {HTML: 'A', CSS: 'B', JavaScript: 'C'},
  abc: [1, 2, 3]
};
const flatten = (ob) => {
  let result = {};
  for (const i in ob) {
    if ((typeof ob[i]) === 'object' && !Array.isArray(ob[i])) {
      const temp = flatten(ob[i]);
      for (const j in temp) {
        result[j] = temp[j];
      }
    } else {
      result[i] = ob[i];
    }
  }
  return result;
};
console.log(flatten(obj));

Output: