Many times, we are in a situation where we are getting data in nested form and want to show it to the user in flatten format. For example, we have the data below
{
a: {
c: -98,
a: "spiderman",
b: {
a: 345.67,
c: {
a: ["moon knight", "daredevil"],
b: true,
c: undefined,
},
b: ["dr strange supreme", "hawkeye", "falcon"],
},
},
b: 123,
c: ["thanos", "deadpool", "quicksilver"],
}
And we want to display it like below
{
a: [ 'spiderman', 345.67, 'moon knight', 'daredevil' ],
c: [ -98, undefined, 'thanos', 'deadpool', 'quicksilver' ],
b: [ true, 'dr strange supreme', 'hawkeye', 'falcon', 123 ]
}
Approach
To achieve the above results, we will traverse the nested object in depth first fashion (we can do it in breadth first also) and store the properties as an array in the resulting flattened object. Below are the steps to solve this problem.
Let NO be the nested object and RO be the resulting object (an empty object passed as a parameter) and FlattenObject is the function which flattens the nested object.
FlattenObject(NO, RO)
For each key in NO
If RO doesn’t have a property with key
RO[key] = []
End if
If NO[key] is an array
Add the elements of NO[key] to RO[key]
Else if NO[key] is an object
Call FlattenObject(NO[key], RO[key])
Else
Add NO[key] to RO[key]
End if
End loop
Implementation
Below is the implementation of the above algorithm in JavaScript.
data.js
module.exports.nestedObject = {
a: {
c: -98,
a: "spiderman",
b: {
a: 345.67,
c: {
a: ["moon knight", "daredevil"],
b: true,
c: undefined,
},
b: ["dr strange supreme", "hawkeye", "falcon"],
},
},
b: 123,
c: ["thanos", "deadpool", "quicksilver"],
};
index.js
const { nestedObject } = require("./data");
function getFlattenObject(nestedObject) {
const flatObject = {};
flattenObject(nestedObject, flatObject);
return flatObject;
}
function flattenObject(nestedObject, result) {
for (let prop in nestedObject) {
if (!result[prop]) {
result[prop] = [];
}
if (Array.isArray(nestedObject[prop])) {
result[prop].push(...nestedObject[prop]);
} else if (typeof nestedObject[prop] === "object") {
flattenObject(nestedObject[prop], result);
} else {
result[prop].push(nestedObject[prop]);
}
}
}
console.log(getFlattenObject(nestedObject));