Recursive looping over array of objects using reduce

Question

I have an array of objects with children. The goal is to remove every item from items arrays.

Is it possible to do without using forEach and map loops? How to use reduce in this case?

The problem is some arrays have items on one level and others have children array with items inside. Sample here:

{
 "label": "child1",
 "children": [
 {
 "label": "child2",
 "items": [
 "item1",
 "item2"
 ]
 },
 {
 "label": "child3",
 "items": [
 "item1",
 "item2",
 "item3"
 ]
 }
 ]
}

As a result, I want to see a mutated array of objects with empty items arrays. Here`s an object to be mutated:

[
 {
 "label": "parent",
 "children": [
 {
 "label": "child1",
 "children": [
 {
 "label": "child2",
 "items": [
 "item1",
 "item2"
 ]
 },
 {
 "label": "child3",
 "items": [
 "item1",
 "item2",
 "item3"
 ]
 }
 ]
 },
 {
 "label": "child4",
 "items": []
 },
 {
 "label": "child5",
 "items": ["item1","item2"]
 }
 ]
 }
]

And here is my incomplete solution:

function flattenDeep(arr) {
 return arr.reduce(
 (acc, val) =>
 Array.isArray(val)
 ? acc.concat(flattenDeep(val.children))
 : acc.concat(val.children),
 []
 );
}

• Nina Scholz: please add your try and the wanted result. do you want to get new arrays/objects, or mutate the original one?
• rebilliony: I just want to mutate this one. I was trying to do it using forEach and map, but it does not look good.
• rebilliony: I don`t have a correct working solution. My code cannot deal with different objects on the same level. And also idealy it should be done using reduce.

Answer 1

Here's a way to empty all items arrays.

The idea is to use a predefined reducer method that can you can use recursively.

const reducer = (reduced, element) => {
 // empty items array
 if (element.items) {
 element.items.length = 0;
 }
 // if element has children, recursively empty items array from it
 if (element.children) {
 element.children = element.children.reduce(reducer, []);
 }
 return reduced.concat(element); // or: [...reduced, element]
};
document.querySelector("pre").textContent = 
 JSON.stringify(getObj().reduce(reducer, []), null, " ");
// to keep relevant code on top of the snippet
function getObj() {
 return [
 {
 "label": "parent",
 "children": [
 {
 "label": "child1",
 "children": [
 {
 "label": "child2",
 "items": [
 "item1",
 "item2"
 ]
 },
 {
 "label": "child3",
 "items": [
 "item1",
 "item2",
 "item3"
 ]
 }
 ]
 },
 {
 "label": "child4",
 "items": []
 },
 {
 "label": "child5",
 "items": ["item1","item2"]
 }
 ]
 }
 ];
}

<pre></pre>

• rebilliony: Thank you, that is what I was looking for.