How to recursively transform an array of nested objects into array of flat objects?

Question

I have the following array of deeply nested objects:

const data = [
 {
 name: "foo",
 children:[
 {
 count: 1,
 name: "A"
 },
 { 
 count: 2,
 name: "B"
 }
 ]
 },
 {
 name: "bar",
 children: [
 {
 count: 3,
 name: "C",
 children: [
 {
 count: 4,
 name: "D"
 }
 ]
 }
 ]
 }
 ]

The way I'd like to transform this would be such as:

const expectedStructure = [
 {
 count: 1,
 name: "A",
 label: "foo = A"
 },
 {
 count: 2,
 name: "B",
 label: "foo = B"
 },
 {
 count: 3,
 name: "C",
 label: "bar = C"
 },
 {
 count: 4,
 name: "D",
 label: "bar = D"
 }
 ]

I created recursive function that transforms nested array into array of flat objects.

Here's my code:

function getChildren(array, result=[]) {
 array.forEach(({children, ...rest}) => {
 result.push(rest);
 if(children) {
 getChildren(children, result);
 }
 });
 return result;
}

And here's output I get:

[ { name: 'foo' },
 { count: 1, name: 'A' },
 { count: 2, name: 'B' },
 { name: 'bar' },
 { count: 3, name: 'C' },
 { count: 4, name: 'D' } ]

The problem is that I need to add label field to every object in my output array, and I can't find a solution without iterating multiple times through the final array to make desired transformation. How to properly insert label field without hugely augmenting complexity of the function?

• Barmar: You need to do the recursion differently for the top level and nested levels, because the top-level name properties get passed down to all levels below it for the labels.

Answer 1

Check each iteration whether the current item is a "parent" item, and reassign label if it is.

const data = [{name:"foo",children:[{count:1,name:"A"},{count:2,name:"B"}]},{name:"bar",children:[{count:3,name:"C",children:[{count:4,name:"D"}]}]}];
function getChildren(array, result = [], label = "") {
 array.forEach(({ children, name, count }) => {
 if (!label || name[1]) {
 label = `${name} = `;
 }
 if (count) {
 result.push({ count, name, label: label + name });
 }
 if (children) {
 getChildren(children, result, label);
 }
 });
 return result;
}
const res = getChildren(data);
console.log(res);

Answer 2

You can use a different function for the nested levels, so you can pass the top-level name properties down through all those recursion levels.

function getTopChildren(array, result = []) {
 array.forEach(({
 name,
 children
 }) => {
 if (children) {
 getChildren(children, name, result);
 }
 });
 return result;
}
function getChildren(array, name, result) {
 array.forEach(({
 children,
 ...rest
 }) => {
 rest.label = `${name} = ${rest.name}`;
 result.push(rest);
 if (children) {
 getChildren(children, name, result);
 }
 });
}
const data = [{
 name: "foo",
 children: [{
 count: 1,
 name: "A"
 },
 {
 count: 2,
 name: "B"
 }
 ]
 },
 {
 name: "bar",
 children: [{
 count: 3,
 name: "C",
 children: [{
 count: 4,
 name: "D"
 }]
 }]
 }
]
console.log(getTopChildren(data));

Answer 3

You can also do this recursively with flatMap based on whether or not a parent has been passed into the recursive call :

const data = [{
 name: "foo",
 children: [{
 count: 1,
 name: "A"
 },
 {
 count: 2,
 name: "B"
 }
 ]
 },
 {
 name: "bar",
 children: [{
 count: 3,
 name: "C",
 children: [{
 count: 4,
 name: "D"
 }]
 }]
 }
];
function flatten(arr, parent = null) {
 return parent
 ? arr.flatMap(({name, count, children}) => [
 {name, count, label: `${parent} = ${name}`}, 
 ...flatten(children || [], parent)
 ]) 
 : arr.flatMap(({name, children}) => flatten(children || [], name));
}
console.log(flatten(data));

Answer 4

Sometimes it's a little easier to reason about the code and write it clearly using generators. You can yield* from the recursive calls:

const data = [{name: "foo",children:[{count: 1,name: "A"},{ count: 2,name: "B"}]},{name: "bar",children: [{count: 3,name: "C",children: [{count: 4,name: "D"}]}]}]
function* flat(input, n){
 if (!input) return
 if (Array.isArray(input)) {
 for (let item of input)
 yield* flat(item, n)
 }
 let _name = n || input.name
 if ('count' in input) {
 yield { count:input.count, name:input.name, label:`${_name} = ${input.name}`} 
 }
 yield* flat(input.children, _name)
 
}
let g = [...flat(data)]
console.log(g)

The function returns a generator, so you need to spread it into a list [...flat(data)] if you want a list or iterate over it if you don't need to store the list.