javascript - 在纯 Javascript 中从 Url 生成 Treeview

标签 javascript object treeview

我以数组形式获取文件的 URL,如下所示

enter image description here

我想实现这样的目标

var mainObj = [
{
    name: "Home",
    files: ["excel doc 1.xlsx", "excel doc 2.xlsx"],
    folders: [{
        name: "Procedure",
        files: ["excel doc 2.xlsx"],
        folders: []
    }],
},
{
    name: "BusinessUnits",
    files: [],
    folders:[
        {
            name:"Administration",
            files:[],
            folders:[{
                name: "AlKhorDocument",
                files: [],
                folders:[
                    {
                        name: "Album1",
                        files: [],
                        folders:[......]
                    }
                ]
            }]
        }
    ]
}

]

...... 如果您能提供帮助,请告诉我。

顺便说一句,我想实现如下所示

enter image description here

如果你能提出更好的建议,那么这会对我有帮助..

最佳答案

通过仅包含字符串的路径部分,您可以通过减少文件夹结构来减少数组,并将最终文件添加到文件夹结构中。

var data = ['Home/excel doc 1.xlsx', 'Home/excel doc 2.xlsx', 'Home/Procedure/excel doc', 'Home/Procedure/2.xlsx', 'BusinessUnits/Administration/AlKhorDocument/Album1/text.txt'],
    result = data.reduce((r, p) => {
        var path = p.split('/'),
            file = path.pop(),
            final = path.reduce((o, name) => {
                var temp = (o.folders = o.folders || []).find(q => q.name === name);
                if (!temp) o.folders.push(temp = { name });
                return temp;
            }, r);

        (final.files = final.files || []).push(file);
        return r;
    }, {});

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

关于javascript - 在纯 Javascript 中从 Url 生成 Treeview,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59717282/

相关文章:

java - 将 GWT 与 $(document).ready 集成

javascript - 使用 jQuery 检索 Flickr 照片标题和描述

Javascript 如何创建一个按顺序包含数字的对象

Java,以下哪种方法更能实现更快的响应和内存管理? 100 个类的对象或 1 个带有 arrayList 的对象

winforms - Winform .NET 增强 TreeView ?

javascript - Django 的 CSRF 验证失败,尽管 Firebug 说 cookies 选项卡下有一个 csrftoken。为什么?

javascript - 如果 ajax 调用时间低于 1 秒则隐藏微调器

ios - 设置一个对象属性以匹配另一个

c# - 将节点添加到特定的子节点

c - 编辑 gtkcellrenderertext