基於元素數組中的父屬性構建JavaScript樹

Question

我試圖在mongoDB中存儲目錄樹。這是我的模式：

{ "_id" : ObjectId("541ba7f156d876d3f787bc33"), "name" : "file_1.mp3", "length" : 136.6, "kind" : "audio", "parent" : null } 
{ "_id" : ObjectId("541ba7f156d876d3f787bc34"), "name" : "file_2.mp3", "length" : 132.0, "kind" : "audio", "parent" : null } 
{ "_id" : ObjectId("541ba7f156d876d3f787bc35"), "name" : "file_3.mp3", "length" : 116.8, "kind" : "audio", "parent" : null } 
{ "_id" : ObjectId("541ba7f156d876d3f787bc36"), "name" : "file_4.mp3", "length" : 206.7, "kind" : "audio", "parent" : null } 
{ "_id" : ObjectId("541ba84456d876d3f787bc37"), "name" : "folder_1", "length" : null, "kind" : "dir", "parent" : null } 
{ "_id" : ObjectId("541ba84456d876d3f787bc38"), "name" : "folder_2", "length" : null, "kind" : "dir", "parent" : null } 
{ "_id" : ObjectId("541ba84456d876d3f787bc39"), "name" : "folder_3", "length" : null, "kind" : "dir", "parent" : null } 
{ "_id" : ObjectId("541ba91656d876d3f787bc3a"), "name" : "subfolder_1", "length" : null, "kind" : "dir", "parent" : ObjectId("541ba84456d876d3f787bc37") } 
{ "_id" : ObjectId("541ba91656d876d3f787bc3b"), "name" : "subfolder_2", "length" : null, "kind" : "dir", "parent" : ObjectId("541ba84456d876d3f787bc37") } 
{ "_id" : ObjectId("541ba91656d876d3f787bc3c"), "name" : "subfolder_3", "length" : null, "kind" : "dir", "parent" : ObjectId("541ba84456d876d3f787bc37") } 
{ "_id" : ObjectId("541ba98056d876d3f787bc3d"), "name" : "subsubfolder_1", "length" : null, "kind" : "dir", "parent" : ObjectId("541ba91656d876d3f787bc3b") } 
{ "_id" : ObjectId("541ba98056d876d3f787bc3e"), "name" : "subsubfolder_2", "length" : null, "kind" : "dir", "parent" : ObjectId("541ba91656d876d3f787bc3b") } 
{ "_id" : ObjectId("541ba98056d876d3f787bc3f"), "name" : "subsubfolder_3", "length" : null, "kind" : "dir", "parent" : ObjectId("541ba91656d876d3f787bc3b") } 

我想改變這個，讓孩子們嵌套在父母的內部。即：

[ 
    { 
    "_id" : ObjectId("541ba7f156d876d3f787bc33"), 
    "name" : "file_1.mp3", 
    "length" : 136.6, 
    "kind" : "audio", 
    "parent" : null 
    } 
    { 
    "_id" : ObjectId("541ba7f156d876d3f787bc34"), 
    "name" : "file_2.mp3", 
    "length" : 136.6, 
    "kind" : "audio", 
    "parent" : null 
    } 
    { 
    "_id" : ObjectId("541ba7f156d876d3f787bc35"), 
    "name" : "file_3.mp3", 
    "length" : 136.6, 
    "kind" : "audio", 
    "parent" : null 
    } 
    { 
    "_id" : ObjectId("541ba7f156d876d3f787bc36"), 
    "name" : "file_4.mp3", 
    "length" : 136.6, 
    "kind" : "audio", 
    "parent" : null 
    } 
    { 
    "_id" : ObjectId("541ba84456d876d3f787bc37"), 
    "name" : "folder_1", 
    "length" : null, 
    "kind" : "dir", 
    "parent" : null 
    "children": [ 
     { 
     "_id" : ObjectId("541ba91656d876d3f787bc3a"), 
     "name" : "subfolder_1", 
     "length" : null, 
     "kind" : "dir", 
     "parent" : ObjectId("541ba84456d876d3f787bc37") 
     }, 
     { 
     "_id" : ObjectId("541ba91656d876d3f787bc3b"), 
     "name" : "subfolder_2", 
     "length" : null, 
     "kind" : "dir", 
     "parent" : ObjectId("541ba84456d876d3f787bc37") 
     "children": [ 
      { 
      "_id" : ObjectId("54198056d876d3f787bc3d"), 
      "name" : "subsubfolder_1", 
      "length" : null, 
      "kind" : "dir", 
      "parent" : ObjectId("541ba91656d876d3f787bc3b") 
      } 
      { 
      "_id" : ObjectId("541ba98056d876d3f787bc3e"), 
      "name" : "subsubfolder_2", 
      "length" : null, 
      "kind" : "dir", 
      "parent" : ObjectId("541ba91656d876d3f787bc3b") 
      } 
      { 
      "_id" : ObjectId("541ba98056d876d3f787bc3f"), 
      "name" : "subsubfolder_3", 
      "length" : null, 
      "kind" : "dir", 
      "parent" : ObjectId("541ba91656d876d3f787bc3b") 
      } 
     ] 
     }, 
     { 
     "_id" : ObjectId("541ba91656d876d3f787bc3c"), 
     "name" : "subfolder_3", 
     "length" : null, 
     "kind" : "dir", 
     "parent" : ObjectId("541ba84456d876d3f787bc37") 
     } 
    ] 
    } 
    { 
    "_id" : ObjectId("541ba84456d876d3f787bc38"), 
    "name" : "folder_2", 
    "length" : null, 
    "kind" : "dir", 
    "parent" : null 
    } 
    { 
    "_id" : ObjectId("541ba84456d876d3f787bc39"), 
    "name" : "folder_3", 
    "length" : null, 
    "kind" : "dir", 
    "parent" : null 
    } 

下面是我使用的嘗試來完成這個功能：

getChildren = function(element) { 
    // find all the entries that have this element as their parent 
    var results = FileTree.find({'parent': element._id}); 

    // did we find any children? 
    if (results.count() !== 0) { 
    // get an array from the mongo cursor 
    var rArr = results.fetch(); 
    // attach a '.children' object to each of the children 
    // so that we continue the tree 
    var children = _.each(rArr, getChildren); 
    //make this subtree part of the original element 
    element.children = children; 
    return element; 
    } 
    else { // the element doesn't have any children 
    element.children = null; 
    return element; 
    } 
}; 

我調用該函數是這樣的：

id = new Meteor.Collection.ObjectID("541ba84456d876d3f787bc37"); 
getChildren(FileTree.findOne({'_id': id})); 

我的控制檯將返回此：

Object { _id: Object, name: "folder_1", length: null, kind: "dir", parent: null, children: undefined } 

爲什麼兒童undefin ED？

這裏有一個現場演示：http://meteorpad.com/pad/imyw4w7z7dihss9t3

Answer 1

你想用的_.map代替_.each，看到here。

_.map返回您的迭代函數的結果數組，這是你想要分配給children參數。 _.each只是循環你的收藏，返回undefined。