将javascript对象变成无序列表答案

【问题标题】：Turn javascript object into unordered list将javascript对象变成无序列表
【发布时间】：2017-11-19 22:10:47
【问题描述】：

我有如下数据：

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>';

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

【问题讨论】：

你应该使用 dfs serach。
为什么你不只是用子属性或其他东西嵌套对象？而且您需要一个函数，您将在其内部调用它以使其递归。
对象中的键/值对没有排序。如果要强制/保留顺序，则需要使用数组。
@Teemoh 不幸的是，我无法控制数据的原始格式，因为它是由 WordPress 提供的。但我明白你在说什么。
@torazaburo 是的，明白了。我对顺序不太挑剔，只要层次结构正确就可以了。

标签： javascript list object recursion

【解决方案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, " "))

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

感谢您的回答。我不熟悉 underscore.js。没有下划线可以做到这一点吗？我不想忘恩负义，但我希望进入无序列表格式，即
等。
请查看不带下划线的更新答案
谢谢，我会更详细地检查一下。答案仍然没有将其放入列表格式。但是越想越觉得可能需要先把它放到一个子父对象结构中，然后再把这个结构转换成一个列表——这么一个两步的过程。当我的数据在对象中时，您的答案还会更改数据结构，因为它将数据结构包装在数组中。我无法更改给我的数据源。

【解决方案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;

【讨论】：