JavaScript：從 json 對象列表構建樹狀結構

Question

我有一個 JSON 對象列表

var files = [{name:"1.xml", path:"folder1/1.xml", tag:"folder1", type:"file"},
{name:"2.jpg",      path:"folder1/folder2/2.jpg", type:"file", tag:"folder1/folder2"},
{name:"3.doc", path:"folder1/folder2/3.doc", type:"file", tag:"folder1/folder2"}];    

我需要創建以下結構

[
{
name:"folder1",
path:"folder1",
type:"folder",
items:[
    {name:"folder2", 
     path:"folder1/folder2", 
     type:"folder", 
     items:[
         {name:"2.xml",path:"folder1/folder2/2.xml", type="file"},
         {name:"3.xml",path:"folder1/folder2/3.xml", type="file"} 
      ]},
     {name:"1.xml", path:"folder1/1.xml", type="file"}
]}]

基本上，每個文件的標簽屬性必須成為一個文件夾，並將文件和其他標簽分組到項目集合中。

Answer 1

你可以使用這個遞歸函數：

 function buildTree(files) { var result = { path: '', items: [] }, i = 0; if (!files.length) return []; // Sort items so they get processed in folder order files.sort( (a, b) => a.path.localeCompare(b.path) ); (function recurse(curr) { var tag = files[i].tag; tag.substr(curr.path.length+!!curr.path).split('/').forEach( folder => { var obj = { name: folder, path: (curr.path ? curr.path + '/' : '') + folder, type: 'folder', items: [] }; curr.items.push(obj); curr = obj; }); while (i < files.length) { var file = files[i]; if (file.tag.indexOf(tag + '/') === 0) { recurse(curr); } else if (file.tag === tag) { curr.items.push({ name: file.name, path: file.path, type: 'file' }); i++; } else { break; } } })(result); return result.items; } // Sample data var files = [ {name:"1.xml", path:"folder1/1.xml", type:"file", tag:"folder1"}, {name:"2.jpg", path:"folder1/folder2/2.jpg", type:"file", tag:"folder1/folder2"}, {name:"3.doc", path:"folder1/folder2/3.doc", type:"file", tag:"folder1/folder2"}, {name:"4.doc", path:"folder1/folder23/3.doc", type:"file", tag:"folder1/folder23"}, {name:"5.doc", path:"folder12/3.doc", type:"file", tag:"folder12"}, ]; // transform to tree structure var tree = buildTree(files); // Output result console.log(tree);

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