通过字符串数组创建具有特定键和值的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: [],
            },
          ]

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

使用特定keys

• diferrentiating文件从目录.

还原操作对象后返回的

这就是我现在要做的：

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

​