用纯Javascript从URL生成Treeview

Question

我正在以如下所示的数组形式获取文件的网址

并且我想实现这样的目标

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:[......]
                    }
                ]
            }]
        }
    ]
}

]

.......请告诉我您是否可以提供帮助。

通过下面我想达到的方式

如果您可以提出更好的建议，那将对我有所帮助。

Answer 1

您需要执行一些字符串解析，以将URL字符串分成不同的部分，收集创建树状结构所需的所有信息。

基本上，您可以将所有URL字符串拆分为它们的部分，并通过分析URL字符串的所有子部分来创建最终的数据结构。

let urls = [
  'http://host.com/Performance/excel doc 1.xlsx',
  'http://host.com/BusinessUnits/Administration/AlKhorDocument/Album1/...',
  // ...
];

let result = [];

urls.forEach(url => {
  let relevantUrl = url.replace('http://host.com/', '');  // remove the unnecessary host name
  let sections = relevantUrl.split('/');  // get all string sections from the URL

  sections.forEach(section => {
    // check if that inner object already exists
    let innerObject = result.find(obj => obj.name === section);

    if(!innerObject) {
      // create an inner object for the section
      innerObject = {
        name: section,
        files: [],
        folders: []
      };
    }

    // add the current URL section (as object) to the result
    result.push(innerObject);
  });
});

您仍然需要处理的是保存节对象的当前子级别，可以执行either iteratively or by calling a recursive function。