通过字符串数组创建具有特定键和值的 JSON 树

Question

我有一个字符串数组

["storage/", "storage/ui/", "storage/inventory/", "storage/model/", "storage/staticmos/", "storage/ui/server.js", "storage/ui/config.js", "storage/ui/elements/", "storage/ui/package.json", "storage/ui/model/", "storage/ui/gulpfile.js", "storage/ui/i18n/", "storage/ui/metadata/", "storage/ui/index.template.html"]

我的目的是制作一个json树，其中每个对象都将包含下一个属性：

name

（目录名称/文件名称），

type

（文件或目录），

path

（实际的数组条目） ,

id

,

children

（仅当类型为目录时！如果目录中没有任何内容则为空数组）

所以返回值应该是这样的：

[
            {
              id: 1,
              name: "Inventory",
              type: "directory",
              path: "../../elements/storage/Inventory",
              children: [
                {
                  id: 2,
                  name: "inventory.yaml",
                  type: "file",
                  path: "../../elements/storage/Inventory/inventory.yaml",
                },
              ],
            },
            {
              id: 3,
              name: "UI",
              type: "directory",
              path: "../../elements/storage/UI",
              children: [
                {
                  id: 4,
                  name: "Model",
                  type: "directory",
                  path: "../../elements/storage/UI/Model",
                  children: [
                    {
                      id: 5,
                      name: "viewmodel",
                      type: "directory",
                      path: "../../elements/storage/UI/Model/viewmodel",
                      children: [],
                    },
                  ],
                },
                {
                  id: 6,
                  name: "elements",
                  type: "directory",
                  path: "../../elements/storage/elements",
                  children: [],
                },
                {
                  id: 7,
                  name: "i18n",
                  type: "directory",
                  path: "../../elements/storage/i18n",
                  children: [],
                },
                {
                  id: 8,
                  name: "index.template.html",
                  type: "file",
                  path: "../../elements/storage/index.template.html",
                },
              ],
            },
            {
              id: 9,
              name: "DeviceConnector",
              type: "directory",
              path: "../../elements/storage/DeviceConnector",
              children: [],
            },
          ]

所以，我现在有两个大问题：

1. 用特定key进行reduce操作对象后返回
2. 区分文件和目录。

这就是我现在得到的：

   createObject([...pathes]) {
    return pathes.reduce((obj, path) => {
      // eslint-disable-next-line no-return-assign
      path.split('/').reduce((obj, key) => {"id":'_' + Math.random().toString(36).substr(2, 9),"name":obj[key],"path":path} , obj);
      return obj;
    }, []);
  }

Answer 1

您可以利用最后一个斜杠并用它来更改类型。

const
    data = ["storage/", "storage/ui/", "storage/inventory/", "storage/model/", "storage/staticmos/", "storage/ui/server.js", "storage/ui/config.js", "storage/ui/elements/", "storage/ui/package.json", "storage/ui/model/", "storage/ui/gulpfile.js", "storage/ui/i18n/", "storage/ui/metadata/", "storage/ui/index.template.html"],
    result = data.reduce((r, path) => {
        path.split('\/').reduce((level, name) => {
            if (name === '') {
                level.type = 'directory';
                return;
            }
            let directory = (level.children = level.children || []).find(q => q.name === name);
            if (!directory) level.children.push(directory = { id: '_' + Math.random().toString(36).substr(2, 9), name, type: 'file', path });
            return directory;
        }, r);
        return r;
    }, {}).children;

console.log(result);

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