Getting File Directories as nested Array object

Question

I want to get my file directories as nested array object but i can't seem to figure out how to convert

[
  'routes/files',
  'routes/files/emptyfolder',
  'routes/files/somefolder',
  'routes/files/somefolder/example.docx',
  'routes/files/test.docx',
  'routes/randomdata.json'
]

to

[
    {
      title: 'routes',
      content: [
        {
          title: 'files',
          content: [
            {
                title: 'empty folder',
                content: []
            },
            {
                title: 'somefolder',
                content: [
                    {
                        title: 'example.docx',
                    },
                ]
            },
            {
                title: 'test.docx',
            }
          ],
        },
        {
            title: 'randomdata.json'
        }
    ],
}
]

it looks impossible problem for me to solve. I would love to know how to solve it.

Thank you.

The wanted result is an array with a single element. You don't need the outer square brackets. Anyway, loop over the initial array, use split("/") to get an array of path parts, then add them to your object by pushing to existing arrays or creating them otherwise. — user5734311
– user5734311, Commented Feb 13, 2022 at 23:17
using directory-tree package literally saved my day after it took lots of hours to figure out solution. (npmjs.com/package/directory-tree) — Waxie
– Waxie, Commented Feb 13, 2022 at 23:59
Here's one way: jsfiddle.net/xbqc3k7g (btw, you were correct about the outer brackets, given that the array could have had more content) — user5734311
– user5734311, Commented Feb 14, 2022 at 7:57

valerii15298 · Accepted Answer · 2022-02-14 00:12:53Z

1

Here is how I solved it: Not the best solution, but works.

const arr = [
  "routes/files",
  "routes/files/emptyfolder",
  "routes/files/somefolder",
  "routes/files/somefolder/example.docx",
  "routes/files/test.docx",
  "routes/randomdata.json",
];

const arr2 = arr.map((p) => p.split("/"));

const setNestedObjectField = (
  obj,
  props,
  value
) => {
  if (!Array.isArray(obj)) {
    if (!obj.content) {
      obj.content = [];
    }
    obj = obj.content;
  }
  for (const propName of props) {
    const next = obj.find((el) => el.title === propName);
    if (!next) {
      console.assert(props.at(-1) === propName);
      // last propName
      obj.push(value);
    } else {
      if (!next.content) {
        next.content = [];
      }
      obj = next.content;
    }
  }
};

const rez = [];
let index = 0;
while (arr2.some((s) => s[index] !== undefined)) {
  // arr2 = arr2.filter((a) => a.length);
  const layer = arr2.reduce((acc, pathArr) => {
    if (pathArr[index] === undefined) return acc;
    acc.add(pathArr.slice(0, index + 1).join("/"));
    return acc;
  }, new Set());

  // console.log({ layer });

  for (const key of layer) {
    setNestedObjectField(rez, key.split("/"), { title: key.split("/").at(-1) });
  }
  index++;
}

console.log(rez);

answered Feb 14, 2022 at 0:12

valerii15298

9016 silver badges23 bronze badges

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

1 Comment

valerii15298 Over a year ago

Yep. I'm kind of professional js dev. But since it is already night in my country and even for me it was not very simple to do. And still it is not perfect, but works)

Nelsongt77 · Accepted Answer · 2022-05-04 04:34:54Z

I came across this question and it's an interesting problem, I know it's already been answered, but I wanted to spend a little of my time to solve it my way.

here I leave my code:

function nestedDirectories (arr) {
  const splittedArray = arr.map(a => a.split('/'));
  return {
    mergeObjs: function(target, source) {
      for (let key in source) {
        if(!target[key]) target[key] = {};
        target[key] = this.mergeObjs(target[key], source[key]);
      }
      return target;
    },
    buildResponse: function (objMain) {
      let arr = [];
      for (let key in objMain) {
        let o = { title: key, content: [] };
        if(key.includes(".")) {
          delete o.content;
        } else if (Object.keys(objMain[key]).length) {
          o.content = this.buildResponse(objMain[key]);
        }
        arr.push(o);
      }
      return arr;
    },
    exec: function () {
      let targetObject = {};
      splittedArray.forEach(arrParent => {
        let strObj = '';
        for (let i = arrParent.length - 1; i >= 0 ; i--) {
          strObj = `"${arrParent[i]}": {${strObj}}`;
        }
        let parseObj = JSON.parse(`{${strObj}}`);
        targetObject = this.mergeObjs(targetObject, parseObj);
      });
      return this.buildResponse(targetObject);
    }
  }
}

and use it like this:

const dirs = [
  'routes/files',
  'routes/files/emptyfolder',
  'routes/files/somefolder',
  'routes/files/test.docx',
  'routes/randomdata.json',
  'routes/files/somefolder/example.docx'
];

const data = nestedDirectories(dirs).exec();

result:

[
  {
    title: 'routes',
    content: [
      {
        title: 'files',
        content: [
          { title: 'emptyfolder', content: [] },
          {
            title: 'somefolder',
            content: [ { title: 'example.docx' } ]
          },
          { title: 'test.docx' }
        ]
      },
      { title: 'randomdata.json' }
    ]
  }
]

Collectives™ on Stack Overflow

Getting File Directories as nested Array object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related