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; }

根据对象数组生成树

1 个答案: