2017-06-01 242 views
0

我JSON對象的數組是這樣的:創建一個嵌套的JSON對象

var fileArray = [ 
    { name: "file1", path: "/main/file1" }, 
    { name: "file2", path: "/main/folder2/file2" }, 
    { name: "file4", path: "/main/folder3/file4" }, 
    { name: "file5", path: "/main/file5" }, 
    { name: "file6", path: "/main/file6" } 
]; 

我希望它看起來像最終是:

fileTree = [ 
    { 
    "name": "file1", 
    "children": [] 
    }, 
    { 
    "name": "folder1" 
    "children": [ 
     { 
     "name": "folder2", 
     "children": [ 
      { 
      "name": "file2", 
      "children": [] 
      } 
     ] 
     }, 
     { 
     "name": "folder3", 
     "children": [ 
      { 
      "name": "file4", 
      "children": [] 
       } 
       ] 
      } 
      ] 
     }, 
    { 
    "name": "file5", 
    "children": [] 
     }, 
    { 
    "name": "file6", 
    "children": [] 
    } 
]; 

我嘗試了Create a nested UL menu based on the URL path structure of menu items中提到的解決方案,但對第一個答案的第一條評論正是我遇到的問題。所有的幫助表示讚賞。

+5

在哪裏呢文件夾1從何而來,也就是爲什麼會一個文件有一個兒童屬性,雖然是空的。 – James

+1

_I有一個JSON對象array_不是如果它看起來像你不 – George

+2

爲什麼你不包括你在這個問題中嘗試過的鏈接片段,並演示不起作用的問題/邊界情況?確切地說,有人會爲你編寫代碼,但我不確定你是否會從中學到很多... – user3297291

回答

1

您可以使用嵌套哈希表作爲對相同目錄的引用,並以與結果集相同的方式構建。

var fileArray = [{ name: "file1", path: "/main/file1" }, { name: "file2", path: "/main/folder2/file2" }, { name: "file4", path: "/main/folder3/file4" }, { name: "file5", path: "/main/file5" }, { name: "file6", path: "/main/file6" }], 
 
    temp = [], 
 
    fileTree; 
 

 
fileArray.forEach(function (hash) { 
 
    return function (a) { 
 
     a.path.replace('/', '').split('/').reduce(function (r, k) { 
 
      if (!r[k]) { 
 
       r[k] = { _: [] }; 
 
       r._.push({ name: k, children: r[k]._ }); 
 
      } 
 
      return r[k]; 
 
     }, hash); 
 
    }; 
 
}({ _: temp })); 
 

 
fileTree = temp[0].children; 
 
console.log(fileTree);
.as-console-wrapper { max-height: 100% !important; top: 0; }

+0

非常感謝Nina!這對我來說做了一些小改動。 – raviabhiram

+0

也許你認爲只使用目錄路徑而不使用文件本身,那麼你可以通過在內部對象中引用文件名,方法是用'...},hash)附加reduce表達式._。push({ name:a.name});' –

+0

我正在使用這個結果來顯示上傳文件夾的文件結構,所以我需要文件和文件夾的路徑。 – raviabhiram

0

這不會給你想要的確切結果,但我認爲這是可用:

var fileArray = [ 
 
    { name: "file1", path: "/main/file1" }, 
 
    { name: "file2", path: "/main/folder2/file2" }, 
 
    { name: "file4", path: "/main/folder3/file4" }, 
 
    { name: "file5", path: "/main/file5" }, 
 
    { name: "file6", path: "/main/file6" } 
 
]; 
 

 
var tree = fileArray.reduce(function (b, e) { 
 
    var pathbits = e.path.split("/"); 
 
    var r = b; 
 
    for (var i=1; i < pathbits.length - 1; i++) { 
 
    bit = pathbits[i]; 
 
    if (!r[bit]) r[bit] = {}; 
 
    r = r[bit]; 
 
    } 
 
    if (!r.files) r.files = []; 
 
    r.files.push(e.name); 
 
    return b; 
 
}, {}); 
 

 
console.log(tree);

+0

感謝您的幫助詹姆斯,但我後來需要使用結果來呈現我使用庫的html頁面,這就是爲什麼我需要的結果看起來完全像我提到的。 – raviabhiram