Генерация дерева на основе массива объекта

Question

Я хочу сгенерировать дерево в следующей форме:

[
  {
  folder: 'src',
  children: [
    {
      folder: 'app',
      children: [
        { file: 'app.module.ts', status: 'M' },
        {
          folder: 'components',
          children: [
            { 
              folder: 'accordion',
              children: [
                { file: 'accordion.components.scss', status: 'M'}
              ]
            },
            {
              folder: 'file-diff-commit',
              children: [
                { file: 'file-diff-commit.component.html', status: 'A' },
                { file: 'file-diff-commit.component.ts', status: 'A' }
              ]
            }
          ]
        },
        {
          folder: 'models',
          children: [
            { file: 'MockGitService.ts' , status: 'M' },
            { file: 'MockLeftPanelService.ts', status: 'M'} 
          ]
        }
      ]
    },
    {
      folder: 'assets'
      children: [

      ]
    }
  ]
},
{ file: 'package.json', status: 'M' },
{ file: 'yarn.lock', status: 'M' }
]

И мне нужно создать с помощью массива объектов. Пример:

[
  { status: "M", path: "src/app/app.module.ts" },
  { status: "M", path: "src/app/components/accordion/accordion.component.scss" },
  { status: "A", path: "src/app/components/file-diff-commit/file-diff-commit.component.html" },
  { status: "A", path: "src/app/components/file-diff-commit/file-diff-commit.component.ts" },
  { status: "M", path: "src/app/models/MockGitService.ts" },
  { status: "M", path: "src/app/models/MockLeftPanelService.ts" },
  { status: "M", path: "src/assets/i18n/en.json" },
  { status: "M", path: "src/assets/i18n/fr.json" },
  { status: "M", path: "package.json" },
  { status: "M", path: "yarn.lock" }
]

Я не прошу целый метод, а просто небольшую подсказку, чтобы вести мое исследование. Из того, что я проверял в интернете, я нашел только дерево, сгенерированное с использованием индекса, но я скорее искал логику с использованием пути.

Любая помощь может приветствоваться. Заранее спасибо.

Answer 1

Вы можете использовать итеративный подход для объектов и рекурсивный подход для разделенных каталогов и конечного файла.

В рекурсии реальный уровень ищется для объекта с требуемым именем каталога, и еслине найден, новый объект генерируется с folder и children.

. В конце файловый объект перемещается на последний уровень.

var data = [{ status: "M", path: "src/app/app.module.ts" }, { status: "M", path: "src/app/components/accordion/accordion.component.scss" }, { status: "A", path: "src/app/components/file-diff-commit/file-diff-commit.component.html" }, { status: "A", path: "src/app/components/file-diff-commit/file-diff-commit.component.ts" }, { status: "M", path: "src/app/models/MockGitService.ts" }, { status: "M", path: "src/app/models/MockLeftPanelService.ts" }, { status: "M", path: "src/assets/i18n/en.json" }, { status: "M", path: "src/assets/i18n/fr.json" }, { status: "M", path: "package.json" }, { status: "M", path: "yarn.lock" }],
    tree = [];

data.forEach(({ status, path }) => {
    var dirs = path.split('/'),
        file = dirs.pop();

    dirs
        .reduce((level, folder) => {
            var object = level.find(o => o.folder === folder);
            if (!object) {
                level.push(object = { folder, children: [] });
            }
            return object.children;
        }, tree)
        .push({ file, status });
});

console.log(tree);

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