嵌套树结构数据生成 [英] Nested tree Structure Data Generation
问题描述
请问一下我的英语和写作问题，我有一组json数据，我试图将其制成嵌套树状结构，但没有成功，希望有人能帮助我. 我的示例数据:
please bare with my English and writing question, i have a array of json data which i am trying to make it in a nested tree structure but not getting success , hope someone can help me out. My Example Data:
[ {
"id" : 1,
"name" : "Abc",
"path" : "/",
"type" : "folder"
}, {
"id" : 2,
"name" : "Xyz",
"path" : "/Abc/",
"type" : "folder"
}, {
"id" : 3,
"name" : "Pqr",
"path" : "/Abc/Xyz/",
"type" : "folder"
}, {
"id" : 4,
"name" : "Zap",
"path" : "/Abc/Xyz/Pqr/",
"type" : "folder"
},{
"id" : 5,
"name" : "file1",
"path" : "/Abc/Xyz/Pqr/",
"type" : "file"
},{
"id" : 6,
"name" : "file2",
"path" : "/Abc/Xyz/Pqr/",
"type" : "file"
},{
"id" : 7,
"name" : "file3",
"path" : "/Abc/Xyz/",
"type" : "file"
},{
"id" : 8,
"name" : "file4",
"path" : "/Abc/Xyz/Pqr/Zap/",
"type" : "file"
}
抱歉，我需要少量的大数据才能正确理解，现在我想要的嵌套格式就是这样.
Sorry i am taking little big data to make understand properly, now the nested format i which i want it is something like this.
[{
"id" : 1,
"name" : "Abc",
"path" : "/",
"type" : "folder"
"Children":[{
"id" : 2,
"name" : "Xyz",
"path" : "/Abc/",
"type" : "folder",
"Children":[{
"id" : 3,
"name" : "Pqr",
"path" : "/Abc/Xyz/",
"type" : "folder",
"Children": [{
"id" : 4,
"name" : "Zap",
"path" : "/Abc/Xyz/Pqr/",
"type" : "folder",
"Children":[{
"id" : 8,
"name" : "file4",
"path" : "/Abc/Xyz/Pqr/Zap/",
"type" : "file"
}]
},{
"id" : 5,
"name" : "file1",
"path" : "/Abc/Xyz/Pqr/",
"type" : "file"
},{
"id" : 6,
"name" : "file2",
"path" : "/Abc/Xyz/Pqr/",
"type" : "file"
}]
},{
"id" : 7,
"name" : "file3",
"path" : "/Abc/Xyz/",
"type" : "file"
}]
}]
}
现在与lodash一起使用的登录是这样的:datas = allData
Now the login using with lodash is like this: datas = allData
const dd= [];
_.forEach(datas, function(v, k) {
let cc = {};
if (v.type == 'folder') {
cc['children'] = _.filter(datas, function(v1, k1) {
if (v.path + v.name + '/' == v1.path || v1.path.startsWith(v.path + v.name + '/')) {
return v1;
}
});
cc['name'] = v.name;
cc['type'] = v.type;
cc['id'] = v.id;
cc['path'] = v.path;
dd.push(cc);
} else {
if (v.path == '/') {
dd.push(cc);
}
}
});
但是得不到正确的答案，我知道问题已经太久了，但是请帮我解决这个问题.
But not getting it properly, i know question got too long but help me out with this.
推荐答案
哇！很好玩.
const data = [ {
"id" : 1,
"name" : "Abc",
"path" : "/",
"type" : "folder"
}, {
"id" : 2,
"name" : "Xyz",
"path" : "/Abc/",
"type" : "folder"
}, {
"id" : 3,
"name" : "Pqr",
"path" : "/Abc/Xyz/",
"type" : "folder"
}, {
"id" : 4,
"name" : "Zap",
"path" : "/Abc/Xyz/Pqr/",
"type" : "folder"
},{
"id" : 5,
"name" : "file1",
"path" : "/Abc/Xyz/Pqr/",
"type" : "file"
},{
"id" : 6,
"name" : "file2",
"path" : "/Abc/Xyz/Pqr/",
"type" : "file"
},{
"id" : 7,
"name" : "file3",
"path" : "/Abc/Xyz/",
"type" : "file"
},{
"id" : 8,
"name" : "file4",
"path" : "/Abc/Xyz/Pqr/Zap/",
"type" : "file"
}]
const pathPartRegex = /.*?\//g;
const tree = _.reduce(data, (result, value) => {
const pathParts = value.path.match(pathPartRegex);
let node = result;
let path = "";
// Go down through tree until last path part
const notLastPart = pathParts.splice(0, pathParts.length - 1);
for (const pathPart of notLastPart) {
path += pathPart;
const existingNode = node.children
? node.children.find(item => item.path === path)
: node.find(item => item.path === path);
if (existingNode) {
node = existingNode
} else {
// If we need to traverse over a path that doesn't exist, just create it
// See notes
const newNode = {
path: path,
children: []
};
// The root element is just an array, and doesn't have a children property
if (node.children) {
node.children.push(newNode);
} else {
node.push(newNode);
}
node = newNode;
}
}
// Add new node
const newNode = {
id: value.id,
name: value.name,
type: value.type,
path: value.path,
children: []
};
// The root element is just an array, and doesn't have a children property
if (node.children) {
node.children.push(newNode);
} else {
node.push(newNode);
}
return result;
}, []);
通过RunKit( https://npm.runkit.com/lodash )进行了测试
Tested via RunKit (https://npm.runkit.com/lodash)
注意:
样本数据集不涉及如何处理根本没有定义父"路径的情况:
The sample data set does not cover how to handle a situation where the "parent" path is not defined at all:
const data = [{
"id" : 1,
"name" : "Abc",
"path" : "/",
"type" : "folder"
}, {
"id" : 3,
"name" : "Pqr",
"path" : "/Abc/Xyz/",
"type" : "folder"
}];
在子级之后也没有定义父级"路径的情况:
Nor a situation where the "parent" path is defined after the child:
const data = [{
"id" : 1,
"name" : "Abc",
"path" : "/",
"type" : "folder"
}, {
"id" : 3,
"name" : "Pqr",
"path" : "/Abc/Xyz/",
"type" : "folder"
}, {
"id" : 2,
"name" : "Xyz",
"path" : "/Abc/",
"type" : "folder"
}];
我编写的代码将处理这些问题，但可能会创建没有id属性的节点.如果需要处理此类情况，则可以预先修复输入数据，也可以修改此代码以处理这些情况.
The code I wrote will handle these, but may create nodes without an id property. If you need to handle situations like that, you can either fix the input data beforehand or modify this code to handle those situations.
这篇关于嵌套树结构数据生成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
