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及其父对象，如果它没有父对象，则将其标记为false。我需要做的是将它输出到一个多级无序列表，所以它应该是：

项酮
- 项二
  - 项三
  - 项四
- 项六
项十五
- 项个

现在这个数据是一个简化的样本，但列表可能超过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>';

更新：一些答案已将我的数据对象转换为数组。重要的是数据作为对象保留，因为这是我提供的值，我无法改变它。到目前为止，我的想法是，我可能需要先将数据转换为多级对象结构，然后在完成后将多级对象转换为无序列表。这样，数据最初可以更容易地被操纵到适当的层次结构中。

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;

将javascript对象转换为无序列表

2 个答案: