javascript - 将文件/目录结构转换为 vue json 中的“树”
问题描述
将文件/目录结构转换为 vue 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"
}
]
可能有任意数量的任意路径,这是遍历目录中的文件和文件夹的结果。
我要做的是确定这些的“根”节点。最终,这将存储在 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);
我不知道为什么它会通过 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
}
]
},
]
}
]
}
]
},
]
解决方案
编辑
这是基于我最初的回答的完整实现。我将 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);
推荐阅读
- ios - 如何正确编写 Rails API 控制器以执行与 iOS 客户端的完全同步
- java - “令牌语法错误”;“, , 预期”
- javascript - export 作为在 javascript 上导出模块的语句的好处和用法?
- python - 用于张量流中不同数量元素的标签和预测的精度和召回 eval_metrics
- javascript - 分页 AngularJS 发布应用程序性能问题
- laravel - 未找到接口“App\HasMediaConversions”
- c - 字数统计程序未从文本文件中检测到双新行
- scala - 为什么scala的隐式查找忽略嵌套类的伴随对象
- sql - 我需要在出院日期为空的出院日期列中放置录取日期值
- javascript - 页面在刷新时不加载 - react-router-dom