Convert array of paths into a Tree in JavaScript [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 3 years ago.

Improve this question

Given this input:

const paths = ["src", "src/components", "src/components/index.ts", "src/utils", "src/configuration/config.ts", "another/file.ts"];

I need to create a function or a data structure that returns a Tree with the following structure.

[
      {
            "id": "src",
            "level": 1,
            "childrens": [
                  {
                        "id": "src/components",
                        "level": 2,
                        "childrens": [
                              {
                                    "id": "src/components/index.ts",
                                    "level": 3,
                                    "childrens": []
                              }
                        ]
                  },
                  {
                        "id": "src/utils",
                        "level": 2,
                        "childrens": []
                  },
                  {
                        "id": "src/configuration",
                        "level": 2,
                        "childrens": [
                              {
                                    "id": "src/configuration/config.ts",
                                    "level": 3,
                                    "childrens": []
                              }
                        ]
                  }
            ]
      },
      {
            "id": "another",
            "level": 1,
            "childrens": [
                  {
                        "id": "another/file.ts",
                        "level": 2,
                        "childrens": []
                  }
            ]
      }
]

I tried everything but I can't make it work, so if anyone can help I would appreciate it a lot.

Thank you.

The plural form is "children", not "childrens"

Dieter Pisarewski
– Dieter Pisarewski

2022-08-27 21:32:32 +00:00
Commented Aug 27, 2022 at 21:32 — Dieter Pisarewski
– Dieter Pisarewski, Commented Aug 27, 2022 at 21:32

IT goldman · Accepted Answer · 2022-08-27 21:28:45Z

1

First, here's the solution based on this answer: https://stackoverflow.com/a/57344801/3807365. Explanation below.

const paths = ["src", "src/components", "src/components/index.ts", "src/utils", "src/configuration/config.ts", "another/file.ts"];

let agg = {
  temp: []
};

paths.forEach(path => {
  path.split('/').reduce((agg, part, level, parts) => {
    if (!agg[part]) {
      agg[part] = {
        temp: []
      };
      agg.temp.push({
        id: parts.slice(0, level + 1).join("/"),
        level: level + 1,
        children: agg[part].temp
      })
      // console.log(agg)
    }
    return agg[part];
  }, agg)
})

var result = agg.temp;
console.log(result)

.as-console-wrapper {
  max-height: 100% !important;
}

Explanation:

Given a path (splitted to parts) and the result which is an empty array [] we are building this kind of object (helper object!):

{
  "src" : {
    "utils" : {
      "file.ts" : {}
    }, 
    "components" : {
      "file.ts" : {}
    }
  },
  "another": {
    "file.ts" : {}
  }
}

We do this step by step as we go on each part of the path. And we do this to each path building this lovely tree. Simple enough.

But as we do, we are creating arrays in the result object (which is under property temp) - arrays of items of the same level in the format {id, level, children}. Finally, we ignore this entire helper tree and only return the first level array - which is the result (under property temp).

Once you realize this, you can see the possible error in this method. Can you spot it? What kind of path name will "mess" with the result?

edited Aug 27, 2022 at 21:28

answered Aug 27, 2022 at 20:27

IT goldman

20.4k2 gold badges18 silver badges34 bronze badges

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

1 Comment

User Over a year ago

Is it too much to ask to give a little explanation of the process? Thank you very much, this works perfectly but I'm not sure I understand it well

Collectives™ on Stack Overflow

Convert array of paths into a Tree in JavaScript [closed]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related