flatten tree structure into array

Question

I have this tree structure:

    data = 
    {
     [
       {
        type: "folder"
        name: "animals"
        path: "/animals"
        children  :
          [
            {
            type: "folder"
            name: "cat"
            path: "/animals/cat"
            children:
              [
                {
                  type: "folder"
                  name: "images"
                  path: "/animals/cat/images"
                  children: 
                    [
                      {
                        type: "file"
                        name: "cat001.jpg"
                        path: "/animals/cat/images/cat001.jpg"
                      },
                      {
                        type: "file"
                        name: "cat001.jpg"
                        path: "/animals/cat/images/cat002.jpg"
                      }
                    ]
                }
              ]
            }
        ]
      }
    ]
}

I want to turn it into

[
  {
    type: "folder"
    name: "animals"
    path: "/animals"
  },
  {
    type: "folder"
    name: "cat"
    path: "/animals/cat"
  },
  {
    type: "folder"
    name: "images"
    path: "/animals/cat/images"
  },
  {
    type: "file"
    name: "cat001.jpg"
    path: "/animals/cat/images/cat001.jpg"
  },
  {
    type: "file"
    name: "cat001.jpg"
    path: "/animals/cat/images/cat002.jpg"
  }
]

I came up with this function, but seems does not work

    function flatten(nodes, flattedNodes) {
      for (let index = 0; index < nodes.length; index++) {
        flattedNodes.push(nodes[index]);
        if (nodes[index].children !== undefined)
        if (nodes[index].children.length > 0)
          flatten(nodes[index].children, flattedNodes);
      }
    }

  let flattedTree = [];
  flatten(data, flattedTree);

  console.log(JSON.stringify(flattedTree, null, 4));

It does not flatten some elements. Any ideas how to fix?

~9k and yet only _"seems does not work"_ as description of the problem... -> [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask): _"**Describe the problem.** "It doesn't work" isn't descriptive enough to help people understand your problem. Instead, tell other readers what the expected behavior should be. Tell other readers what the exact wording of the error message is, and which line of code is producing it"_ — Andreas, Apr 06 '22 at 08:22
Does this answer your question? [Flat an array tree js](https://stackoverflow.com/questions/65362132/flat-an-array-tree-js) — pilchard, Apr 06 '22 at 08:38

Robby Cornelissen · Accepted Answer · 2022-04-06T08:37:16.823

Here's a solution using flatMap() and recursion:

const flatten = (array) => array.flatMap(({ type, name, path, children }) => [
  { type, name, path },
  ...flatten(children || [])
]);

Complete snippet:

const data = [{
  type: "folder",
  name: "animals",
  path: "/animals",
  children: [{
    type: "folder",
    name: "cat",
    path: "/animals/cat",
    children: [{
      type: "folder",
      name: "images",
      path: "/animals/cat/images",
      children: [{
          type: "file",
          name: "cat001.jpg",
          path: "/animals/cat/images/cat001.jpg"
        }, {
          type: "file",
          name: "cat001.jpg",
          path: "/animals/cat/images/cat002.jpg"
        }
      ]
    }]
  }]
}];

const flatten = (array) => array.flatMap(({type, name, path, children}) => [
  { type, name, path },
  ...flatten(children || [])
]);

console.log(flatten(data));

flatten tree structure into array

1 Answers1