關閉javascript的對象無序列表

Question

我有這樣的數據：

var data = { 
itemOne:{id:"itemOne",parent:false}, 
itemTwo:{id:"itemTwo",parent:"itemOne"}, 
itemThree:{id:"itemThree",parent:"itemTwo"}, 
itemFour:{id:"itemFour",parent:"itemTwo"}, 
itemFive:{id:"itemFive",parent:false}, 
itemSix:{id:"itemSix",parent:"itemOne"}, 
itemSeven:{id:"itemSeven",parent:"itemFive"}, 
}; 

所以在主數據對象的每個子對象指定的ID及其父，如果它沒有被標記爲父母假。我需要做的是輸出到這一個多層次的無序列表，所以它應該是這樣的：

• 項目一
  • 項目二
    • 項目三
    • 項目四
  • 項目-SiX
• 項目五
  • 項目七個

現在這個數據是Si mplified樣本，但該列表可能超過3個深度級別並以隨機順序呈現。我知道解決方案將涉及某種遞歸，但我不知道如何執行此操作。到目前爲止，我已經建立了以下工作：

var myList = '<ul>'; 
 

 
for(item in data){ 
 
    var id = data[item]['id']; 
 
    var parent = data[item]['parent']; 
 
    
 
    if(parent == false){ 
 
    
 
    myList += '<li>'+id+'</li>'; 
 
    //no idea what to do here 
 
    } 
 
} 
 

 
myList += '</ul>';

UPDATE：一些問題的答案已經把我的數據對象到一個數組。數據作爲一個對象保留是很重要的，因爲這是我提供的價值，我無法改變這一點。到目前爲止，我的想法是，我可能需要首先將數據轉換爲多級對象結構，然後一旦完成，將多級對象轉換爲無序列表。這樣數據可以更容易地在最初被操縱到適當的層次中。

Answer 1

請參閱此邏輯，希望它可以幫助，因爲這會繪製具有深層子節點的樹結構。

這是我爲快速參考創建數組是的，我做了使用遞歸，

https://codepen.io/iamlalit/pen/ZyLLyQ

var arr = [ 
 
     {'id':"itemOne" ,'parentid' : false}, 
 
     {'id':"itemTwo" ,'parentid' : "itemOne"}, 
 
     {'id':"itemThree" ,'parentid' : "itemTwo"}, 
 
     {'id':"itemFour" ,'parentid' : "itemTwo"}, 
 
     {'id':"itemFive" ,'parentid' : "itemTwo"}, 
 
     {'id':"itemSix" ,'parentid' : "itemSeven"}, 
 
     {'id':"itemSeven" ,'parentid' : "itemOne"} 
 
]; 
 

 
unflatten = function(array, parent, tree){ 
 
    
 
    tree = typeof tree !== 'undefined' ? tree : []; 
 
    parent = typeof parent !== 'undefined' ? parent : { id: 0 }; 
 
     
 
    var children = _.filter(array, function(child){ return child.parentid == parent.id; }); 
 
    
 
    if(!_.isEmpty(children) ){ 
 
     if(parent.id == 0){ 
 
      tree = children; 
 
     }else{ 
 
      parent['children'] = children 
 
     } 
 
     _.each(children, function(child){ unflatten(array, child) });      
 
    } 
 
    
 
    return tree; 
 
} 
 

 
tree = unflatten(arr); 
 
document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "))

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

，沒有下劃線

https://codepen.io/iamlalit/pen/ZyLLyQ

var arr = [ 
 
     {'id':"itemOne" ,'parentid' : false}, 
 
     {'id':"itemTwo" ,'parentid' : "itemOne"}, 
 
     {'id':"itemThree" ,'parentid' : "itemTwo"}, 
 
     {'id':"itemFour" ,'parentid' : "itemTwo"}, 
 
     {'id':"itemFive" ,'parentid' : false}, 
 
     {'id':"itemSix" ,'parentid' : "itemSeven"}, 
 
     {'id':"itemSeven" ,'parentid' : "itemOne"} 
 
]; 
 

 
unflatten = function(array, parent, tree){ 
 
    
 
    tree = typeof tree !== 'undefined' ? tree : []; 
 
    parent = typeof parent !== 'undefined' ? parent : { id: 0 }; 
 
     
 
    var children = array.filter(function(child){ return child.parentid == parent.id; }); 
 
    
 
    if(children ){ 
 
     if(parent.id == 0){ 
 
      tree = children; 
 
     }else{ 
 
      parent['children'] = children 
 
     } 
 
     $.each(children, function(k, child){ unflatten(array, child) });      
 
    } 
 
    
 
    return tree; 
 
} 
 

 
tree = unflatten(arr); 
 
document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

它可以很容易地使用JavaScript來完成。

HTML：

<ul id="unorderedList"></ul> 

的JavaScript：

var data = [ 
    {'id':"itemOne" ,'parentId' : false}, 
    {'id':"itemTwo" ,'parentId' : "itemOne"}, 
    {'id':"itemThree" ,'parentId' : "itemTwo"}, 
    {'id':"itemFour" ,'parentId' : "itemTwo"}, 
]; 

var list = ''; 

data.forEach(function(parent) { 
    list += '<li>' + parent.data; 
    list += '<ul>'; 

    data.forEach(function(item) { 
    if(item.parentId == parent.id) 
     list += '<li>' + item.data + '</li>; 
    } 

    list += '</ul>'; //inner <ul> close 
    list += '</li>'; //outer <li> close 
} 

document.getElementById('unorderedList').innerHTML = list;