在 vue json 中将 file/directory 结构转换为 'tree'

Question

在vue中将file/directory结构转换为'tree'json

我有一个对象数组，如下所示：

[
    {
        "name": "Officer",
        "isDirectory": true,
        "path": "Officer/EventReport/SelfReport/110-04-02/DADF.pdf"
    },
    {
        "name": "Officer",
        "isDirectory": true,
        "path": "Officer/EventReport/SelfReport/110-04-10/110010.pdf"
    },
    {
        "name": "Officer",
        "isDirectory": true,
        "path": "Officer/S_Meeting/W_Meeting/110-5/Officer_from.docx"
    },
    {
        "name": "Officer",
        "isDirectory": true,
        "path": "Officer/S_Meeting/W_Meeting/110-5/1620021359034.jpg"
    },
    {
        "name": "Officer",
        "isDirectory": true,
        "path": "Officer/S_Meeting/W_Meeting/110-5/2021-05-18_092810.png"
    }
]

可以有任意数量的任意路径，这是遍历目录中的文件和文件夹的结果。

我要做的是确定这些的 'root' 节点。最终，这将存储在 mongodb 中并使用物化路径来确定它的关系。

我希望我能展示这个。

[
    {
        "name": "Officer",   //part1
        "isDirectory": true,
        "items": [
            {
                "name": "EventReport",  //part2
                "isDirectory": true,
                "items": [
                    {
                        "name": "SelfReport",  //part3
                        "isDirectory": true,
                        "items": [
                            {
                                "name": "2020-110-04-02",  //part4
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "RCBS.pdf",  // name
                                        "isDirectory": false
                                    }
                                ]
                            },
                            {
                                "name": "2020-110-04-10",  //part4 
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "1100_b.pdf",  //name
                                        "isDirectory": false
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "name": "SecurityMeeting",  // part2
                "isDirectory": true,
                "items": [
                    {
                        "name": "SecurityWorkMeeting",  //part3
                        "isDirectory": true,
                        "items": [
                            {
                                "name": "2021-05-SecurityWorkMeeting",  //part4
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "Officer_Report.docx",  //name
                                        "isDirectory": false
                                    },
                                    {
                                        "name": "16200.jpg",  //name
                                        "isDirectory": false
                                    },
                                    {
                                        "name": "2021-05-18_2342.png",  //name
                                        "isDirectory": false
                                    }
                                ]
                            },      
                        ]
                    }
                ]
            }
        ]
    },    
]

方法

let arr = xhr.data.UploadFile;
let tree = {};

arr.forEach(item => {
  let tokens = item.path.replace(/^\/|\/$/g, "").split("/");
  let current = tree;
  for (let i=0; i<tokens.length; i++) {
    if (!current[tokens[i]]) {
      current[tokens[i]] = {};
    }
    current = current[tokens[i]];
  }
});
const parseNode = function(node) {
  return Object.keys(node).map(key => {
    if (Object.keys(node[key]).length === 0) {
      return {
        isDirectory: false,
        name: key,
      };
    }
    return {
      isDirectory: true,
      name: key,
      items: parseNode(node[key]),
    };
  });
};
let result = parseNode(tree);
console.log("RESULT", result);

更新enter image description here

不知道为什么会通过parseNode = function(node)，却得不到结果。项目应该使用数组。喜欢这个

[
    {
        "name": "Officer",   //part1
        "isDirectory": true,
        "items": [
            {
                "name": "EventReport",  //part2
                "isDirectory": true,
                "items": [
                    {
                        "name": "SelfReport",  //part3
                        "isDirectory": true,
                        "items": [
                            {
                                "name": "2020-110-04-02",  //part4
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "RCBS.pdf",  // name
                                        "isDirectory": false
                                    }
                                ]
                            },
                            {
                                "name": "2020-110-04-10",  //part4 
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "1100_b.pdf",  //name
                                        "isDirectory": false
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "name": "SecurityMeeting",  // part2
                "isDirectory": true,
                "items": [
                    {
                        "name": "SecurityWorkMeeting",  //part3
                        "isDirectory": true,
                        "items": [
                            {
                                "name": "2021-05-SecurityWorkMeeting",  //part4
                                "isDirectory": true,
                                "items": [
                                    {
                                        "name": "Officer_Report.docx",  //name
                                        "isDirectory": false
                                    },
                                    {
                                        "name": "16200.jpg",  //name
                                        "isDirectory": false
                                    },
                                    {
                                        "name": "2021-05-18_2342.png",  //name
                                        "isDirectory": false
                                    }
                                ]
                            },      
                        ]
                    }
                ]
            }
        ]
    },    
]

Answer 1

编辑

这是基于我最初回答的完整实现。我将 forEach() 更改为 map()，因为它更适合这种情况。

let arr = xhr.data.UploadFile;
let tree = {};

arr.forEach(item => {
  let tokens = item.path.replace(/^\/|\/$/g, "").split("/");
  let current = tree;
  for (let i=0; i<tokens.length; i++) {
    if (!current[tokens[i]]) {
      current[tokens[i]] = {};
    }
    current = current[tokens[i]];
  }
});
const parseNode = function(node) {
  return Object.keys(node).map(key => {
    if (Object.keys(node[key]).length === 0) {
      return {
        isDirectory: false,
        name: key,
      };
    }
    return {
      isDirectory: true,
      name: key,
      items: parseNode(node[key]),
    };
  });
};
let result = parseNode(tree);
console.log("RESULT", result);

原始答案

您可以通过迭代数组（我将其命名为数据）来构建地图：

let tree = {};
data.forEach(item => {
  let tokens = item.path.split("/");
  let current = tree;
  for (let i=0; i<tokens.length; i++) {
    if (!current[tokens[i]]) {
      current[tokens[i]] = {};
    }
    current = current[tokens[i]];
  }
});

然后，遍历地图以构建结果数组：

const parseNode = function(node) {
  let res = [];
  Object.keys(node).forEach(key => {
    if (Object.keys(node[key]).length === 0) {
      res.push({
        isDirectory: false,
        name: key,
      });
    } else {
      res.push({
        isDirectory: true,
        name: key,
        items: parseNode(node[key]),
      });
    }
  });
  return res;
};
let result = parseNode(tree);

在 vue json 中将 file/directory 结构转换为 'tree'

transform file/directory structure into 'tree' in vue json

javascript

tree

node.js

vue.js