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),
    []
  );
}

please add your try and the wanted result. do you want to get new arrays/objects, or mutate the original one? — Nina Scholz
– Nina Scholz, Commented Jan 5, 2019 at 13:45
I just want to mutate this one. I was trying to do it using forEach and map, but it does not look good. — rebilliony
– rebilliony, Commented Jan 5, 2019 at 13:46
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. — rebilliony
– rebilliony, Commented Jan 5, 2019 at 13:51

KooiInc · Accepted Answer · 2019-01-05 15:52:32Z

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>

edited Jan 5, 2019 at 15:52

answered Jan 5, 2019 at 15:05

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rebilliony Over a year ago

Thank you, that is what I was looking for.

Collectives™ on Stack Overflow

Recursive looping over array of objects using reduce

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related