JavaScript構建樹層次結構

Question

var array = [{"grandpa","father"}, {"father"}, {"grandpa","father","me"}]; 

鑑於上述數組，我想生成一個如下所示的java-script對象（JSON），它具有父子結構。

{"id":"grandpa", 
"children":[ 
    {"id":"father", 
    "children":[ 
     {"id":"me", 
     "children":[] 
     }] 
    }] 
} 

Answer 1

如果您想編碼JSON，只需使用JSON庫。

不要試圖自己推出。

Answer 2

如果你問，你會如何利用層次路徑列表，並創建一個樹形結構，這裏是你如何能做到這一點在JavaScript：

function convertToHierarchy(arry /* array of array of strings */) 
{ 
    var item, path; 

    // Discard duplicates and set up parent/child relationships 
    var children = {}; 
    var hasParent = {}; 
    for (var i = 0; i < arry.length; i++) 
    { 
     var path = arry[i]; 
     var parent = null; 
     for (var j = 0; j < path.length; j++) 
     { 
      var item = path[j]; 
      if (!children[item]) { 
       children[item] = {}; 
      } 
      if (parent) { 
       children[parent][item] = true; /* dummy value */ 
       hasParent[item] = true; 
      } 
      parent = item; 
     } 
    } 

    // Now build the hierarchy 
    var result = []; 
    for (item in children) { 
     if (!hasParent[item]) { 
      result.push(buildNodeRecursive(item, children)); 
     } 
    } 
    return result; 
} 

function buildNodeRecursive(item, children) 
{ 
    var node = {id:item, children:[]}; 
    for (var child in children[item]) { 
     node.children.push(buildNodeRecursive(child, children)); 
    } 
    return node; 
} 

convertToHierarchy([["1","2"], ["1"], ["1","2","3"]]); 

編輯：

你的問題仍然不明確。我以前的版本假設這兩個東西：

1. 每個節點ID唯一標識
2. 一個指定的層級路徑可以在除根節點

在此示例中其他啓動節點，我假設以下內容：

1. 節點ID不是唯一的，但他們是一個特定節點的孩子內唯一
點
2. 所有層次的路徑開始在樹

這裏的根節點的代碼：返回

function convertToHierarchy(arry /* array of array of strings */) 
{ 
    // Build the node structure 
    var rootNode = {id:"root", children:{}} 
    for (var i = 0; i < arry.length; i++) 
    { 
     var path = arry[i]; 
     buildNodeRecursive(rootNode, path, 0); 
    } 
    return rootNode; 
} 

function buildNodeRecursive(node, path, idx) 
{ 
    if (idx < path.length) 
    { 
     item = path[idx]; 
     if (!node.children[item]) 
     { 
      node.children[item] = {id:item, children:{}}; 
     } 
     buildNodeRecursive(node.children[item], path, idx + 1); 
    } 
} 

的層次結構，但格式有點不同。但是，你應該得到的照片。

Answer 3

我認爲這應該工作。我使用螢火蟲來追蹤輸出結構。

var el = {"name": "Level 1", "paths" : ["fruits"]}; 
    var el2 = {"name": "Level 3", "paths" : ["fruits", "apples", "fuji"]}; 
    var el3 = {"name": "Level 4", "paths" : ["fruits", "apples", "fuji", "red"]}; 
    var el4 = {"name": "Level 2", "paths" : ["fruits", "apples"]}; 

    var allEl = [el, el2, el3, el4]; 


    /* Define recursive function for setting the child */ 
    function setChild(parent, pos, arr, name) 
    { 
     if(pos < arr.length) 
     { 
      if(pos == arr.length-1) //last element of the paths 
       parent.name = name; 

      if(!parent.children){ 
       parent.children = []; 
       parent.children[0] = new Object(); 
      } 
      setChild(parent.children[0], pos + 1, arr, name); 
     } 
    } 

    /* Test starts here */ 
    var root = new Object(); 

    for(var i=0; i<allEl.length; i++) 
    { 
     var el = allEl[i]; 
     setChild(root, 0, el.paths, el.name); 
    } 

    //Firefox debugging ...getfirebug.com 
    console.debug(root);