How to loop through a huge json with same key names - arrays

Question

I have a huge json file with following structure:
name: 'xxx',
worth: [123, 456, 789]
children: [
{name: 'xxx',
worth: [987, 654, 321],
children: [
{name: 'xxx',
worth: [213, 546, 879],
children: []}
},
{name: 'xxx',
worth: [987, 654, 321],
children: [
name: 'xxx',
worth: [213, 546, 879],
children: []
}],
]
The number of children can get up to 10 layer deep.
I created an angular component that displays name and worth and takes children as an Input to call itself again with the children's name and worth but I get maximum stack size errors with this approach.
How to write a function that can loop through this json until children array is empty and display the name and worth of all of them on the way?
This screams recursion but I cant manage...

Answer 1

Presuming your root object represents a single child, your code would look like this:
const child = {
name: "xxx1",
worth: [123, 456, 789],
children: [
{
name: "xxx2",
worth: [987, 654, 321],
children: [
{
name: "xxx3",
worth: [213, 546, 879],
children: []
}
]
},
{
name: "xxx4",
worth: [987, 654, 321],
children: [
{
name: "xxx5",
worth: [213, 546, 879],
children: []
}
]
}
]
};
const sum = (arr) => arr.reduce((a, b) => a + b, 0);
function process_child(child, result) {
const { name, worth, children } = child;
result.push({ name, worth: sum(worth) });
for (const c of children) {
process_child(c, result);
}
return result;
}
const children = process_child(child, []);
console.table(children);
Here, process_child is a function that takes in a single child and a list of results (initially empty). It populates the list of results while going through all the nested children. The end result is an array of objects with the structure {name, worth}, which you can then consume in whatever way you wish.
This is not an Angular-specific problem, and in fact you will just want your Angular component to be a passive consumer of the data returned by this function.
Here's a working execution on CodeSandbox where the result is simply displayed on the page in JSON form.