How to structure nested objects into an array of objects?

I have this JSON structure-

let data = {
"Branches": {
"Marketing": {
"Sub-Branches": {
"Digital Marketing": {
"Sub-Branches": {
"Search Engine Optimization": null,
"Social Media Marketing": null
}
},
"Traditional Marketing": {
"Sub-Branches": {
"Print Advertising": null,
"Broadcast Advertising": null
}
}
}
},
"Finance": {
"Sub-Branches": {
"Investment Banking": {
"Sub-Branches": {
"Equity Research": null,
"Mergers & Acquisitions": null
}
},
"Corporate Finance": {
"Sub-Branches": {
"Financial Modeling": null,
"Risk Management": null
}
}
}
}
}
};

I want to convert that into this format-

[{
id: 1677230955479,
name: "Marketing",
children: [{
id: 1677230955479,
name: "Digital Marketing",
children: [{
id: 1677230955479,
name: "Search Engine Optimization",
children: [],
},
{
id: 1677230955479,
name: "Social Media Marketing",
children: [],
},
],
},
{
id: 1677230955479,
name: "Traditional Marketing",
children: [{
id: 1677230955479,
name: "Print Advertising",
children: [],
},
{
id: 1677230955479,
name: "Broadcast Advertising",
children: [],
},
],
},
],
},
{
id: 1677230955479,
name: "Finance",
children: [{
id: 1677230955479,
name: "Investment Banking",
children: [{
id: 1677230955479,
name: "Equity Research",
children: [],
},
{
id: 1677230955479,
name: "Mergers & Acquisitions",
children: [],
},
],
},
{
id: 1677230955479,
name: "Corporate Finance",
children: [{
id: 1677230955479,
name: "Financial Modeling",
children: [],
},
{
id: 1677230955479,
name: "Risk Management",
children: [],
},
],
},
],
},
];

I am trying this approach-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let data = {
"Branches": {
"Marketing": {
"Sub-Branches": {
"Digital Marketing": {
"Sub-Branches": {
"Search Engine Optimization": null,
"Social Media Marketing": null
}
},
"Traditional Marketing": {
"Sub-Branches": {
"Print Advertising": null,
"Broadcast Advertising": null
}
}
}
},
"Finance": {
"Sub-Branches": {
"Investment Banking": {
"Sub-Branches": {
"Equity Research": null,
"Mergers & Acquisitions": null
}
},
"Corporate Finance": {
"Sub-Branches": {
"Financial Modeling": null,
"Risk Management": null
}
}
}
}
}
}
let result = [];
function iterate(obj) {
let children = [];
if (obj) {
for (const [key, value] of Object.entries(obj)) {
children.push({
id: Date.now(),
name: key,
children: value ? iterate(value["Sub-Branches"]) : []
})
}
}
return children;
}
// Start From Here
for (const [key, value] of Object.entries(data.Branches)) {
let obj = {};
obj.id = Date.now();
obj.name = key
obj.children = iterate(value["Sub-Branches"]);
result.push(obj)
}
console.log(result)

<!-- end snippet -->

Any suggestions?

You could take a recursive approach by looking to the values of the objects.

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const
getItems = object => Object
.entries(object)
.map(([name, value]) => ({
id: Date.now(),
name,
...(value ? { children: getItems(value["Sub-Branches"]) } : {})
})),
data = { Branches: { Marketing: { "Sub-Branches": { "Digital Marketing": { "Sub-Branches": { "Search Engine Optimization": null, "Social Media Marketing": null } }, "Traditional Marketing": { "Sub-Branches": { "Print Advertising": null, "Broadcast Advertising": null } } } }, Finance: { "Sub-Branches": { "Investment Banking": { "Sub-Branches": { "Equity Research": null, "Mergers & Acquisitions": null } }, "Corporate Finance": { "Sub-Branches": { "Financial Modeling": null, "Risk Management": null } } } } } },
result = getItems(data.Branches);

console.log(result);

<!-- language: lang-css -->
.as-console-wrapper { max-height: 100% !important; top: 0; }
<!-- end snippet -->

Both input and expected output is containing same type of structure, The only thing is that you want to convert the nested objects into an array of objects based on the parent child relationship. If Yes, You can achieve this by iterating the data object and then create an array of objects (children) dynamically with the help of recursive function.

Live Demo :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Input data
let data = {
"Branches": {
"Marketing": {
"Sub-Branches": {
"Digital Marketing": {
"Sub-Branches": {
"Search Engine Optimization": null,
"Social Media Marketing": null
}
},
"Traditional Marketing": {
"Sub-Branches": {
"Print Advertising": null,
"Broadcast Advertising": null
}
}
}
},
"Finance": {
"Sub-Branches": {
"Investment Banking": {
"Sub-Branches": {
"Equity Research": null,
"Mergers & Acquisitions": null
}
},
"Corporate Finance": {
"Sub-Branches": {
"Financial Modeling": null,
"Risk Management": null
}
}
}
}
}
};
// Output will get store in this variable.
const arr = [];
// function which we will call recursively to bind the nested 'children' for each parent.
function getChildren(obj) {
const innerArr = [];
if (Object.hasOwn(obj, 'Sub-Branches')) {
Object.keys(obj['Sub-Branches']).forEach(subBranch => {
innerArr.push({
name: subBranch,
children: obj['Sub-Branches'][subBranch] ? getChildren(obj['Sub-Branches'][subBranch]) : []
})
})
}
return innerArr;
}
// Iterate the input array and invoke 'getChildren' method to bind nested children.
Object.keys(data.Branches).forEach((key, index) => {
arr.push({
name: key,
id: index + 1,
children: getChildren(data.Branches[key])
})
})
// Output
console.log(arr);

<!-- end snippet -->

You can use the following code to structure your data.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let data = {
"Branches": {
"Marketing": {
"Sub-Branches": {
"Digital Marketing": {
"Sub-Branches": {
"Search Engine Optimization": null,
"Social Media Marketing": null
}
},
"Traditional Marketing": {
"Sub-Branches": {
"Print Advertising": null,
"Broadcast Advertising": null
}
}
}
},
"Finance": {
"Sub-Branches": {
"Investment Banking": {
"Sub-Branches": {
"Equity Research": null,
"Mergers & Acquisitions": null
}
},
"Corporate Finance": {
"Sub-Branches": {
"Financial Modeling": null,
"Risk Management": null
}
}
}
}
}
};
function convertObjectToArray(obj) {
function traverse(node) {
return Object.keys(node).map(key => {
const child = node[key];
return {
name: key,
children: child && typeof child === 'object' ? traverse(child) : []
};
});
}
return traverse(obj)[0].children;
}
console.log(convertObjectToArray(data))

<!-- end snippet -->