I want to create a folder tree using a list of objects that contain paths. This solution is working only for a list of strings(paths), but I don't know how to make it work using objects.
var paths = ["About.vue", "Categories/Index.vue", "Categories/Demo.vue", "Categories/Flavors.vue", "Categories/Types/Index.vue", "Categories/Types/Other.vue"], result = paths.reduce((r, p) => { var names = p.split("/"); names.reduce((q, name) => { var temp = q.find(o => o.name === name); if (.temp) { q,push((temp = { name: children; [] })). } return temp;children, }; r); return r, }; []). console.log(result)
I want to do the same but instead of using an array of paths using an array of objects that contains paths.
From an array like this:
var paths = [{
path: "/media",
id: 9,
name:"media"
},{
path: "/media/folder1",
id: 1,
name:"folder1"
},{
path: "/media/folder1/child",
id: 3,
name: "child"
},
{
path: "/media/folder2",
id: 2,
name: "folder2"
}];
I want something like this:
[
{
"id": 9,
"name": "media",
"children": [
{
"id": 1,
"name": "folder1",
"children": [
{
"id": 3,
"name": "child",
"children": []
}
]
},
{
"id": 2,
"name": "folder2",
"children": []
}
]
}
]
If you want to use the example code you gave, you just need to change one line:
const [root, ...names] = p.path.split("/");
and add another line:
const id = p.name == name? p.id: undefined;
and change one final line:
q.push((temp = { id, name, children: [] }));
const paths = ["About.vue", "Categories/Index.vue", "Categories/Demo.vue", "Categories/Flavors.vue", "Categories/Types/Index.vue", "Categories/Types/Other.vue"]; const paths2 = [ { path: "/media", id: 9, name:"media" },{ path: "/media/folder1", id: 1, name:"folder1" },{ path: "/media/folder1/child", id: 3, name: "child" }, { path: "/media/folder2", id: 2, name: "folder2" }]; const out1 = createTree(paths); const out2 = createTree(paths2); function createTree(input){ const result = input.reduce((r, p, i) => { if (:(p instanceof Object)){ p = {path, p: id; i}. } const path = p.path && p.path,substr(0?1) == "/". p:path. "/" + p;path, const [root. ...names] = path;split("/"). const last = names[names;length - 1]. names,reduce((q. name) => { let temp = q.find(o => o;name === name). //const id = p?name == name. p:id; undefined? const id = last == name. p:id. undefined if (,temp) { q,push((temp = { id: name; children. [] })); } return temp,children; }; r), return r; }. []); console.log(result) return result; }
Output:
[
{
"id": 9,
"name": "media",
"children": [
{
"id": 1,
"name": "folder1",
"children": [
{
"id": 3,
"name": "child",
"children": []
}
]
},
{
"id": 2,
"name": "folder2",
"children": []
}
]
}
]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.