javascript - 如何使用纯 Javascript 或像 underscore 这样的库动态构建树列表？

Question

我无法从以下 json 获取输出

`[
 {theLevel:1,displayName: "John Doe1", index:1, parIndex:null },
 {theLevel:1,displayName: "John Doe2", index:2, parIndex:null },
 {theLevel:2,displayName: "John Doe3", index:3, parIndex:1 },
 {theLevel:2,displayName: "John Doe4", index:4, parIndex:1 },
 {theLevel:3,displayName: "John Doe5", index:5, parIndex:2 },
 {theLevel:3,displayName: "John Doe6", index:6, parIndex:2 },
]`

我的预期输出如下:

  [
      {text:"John Doe1", items:[{text:"John Doe3"},{text:"John Doe4"} ]},
      {text: "John Doe2, items:[{text:"John Doe5"},{text:"John Doe6"}]} ]

Answer 1

这是一个解决方案，它对整个数据进行几次迭代以生成一棵树。其中一些迭代可以组合起来以提高性能，但在这里我将它们保留原样，以便更清楚地了解发生了什么:

1. 为每个人添加一个子属性

   _.each(data, function(person){
       _.extend(person, {children: []});
   });
   

2. 创建数据的哈希，以人员索引为键，以人员为值

   var people = _.reduce(data, function(memo, person){
       memo[person.index] = person
       return memo;
   }, {} ); 
   

   people 对象看起来像这样:

   {
      1: {theLevel:1,displayName: "John Doe1", index:1, parIndex:null },
      2: {theLevel:1,displayName: "John Doe2", index:2, parIndex:null },
      3: {theLevel:2,displayName: "John Doe3", index:3, parIndex:1 }
      etc.
   }
   

3. 将每个子项添加到其父项的子项中:

   _.each(data, function(person){
       if( !_.isNull(person.parIndex)) people[person.parIndex].children.push(person);
   });
   

   这会给你留下一棵树。

4. 然后你可以将这棵树变成你喜欢的任何东西。此代码片段将产生问题中的输出:

   function isParent (person) {
       return !_.isEmpty(person.children);
   }
   
   var parents = _.filter(people, isParent);
   
   var result = _.map(parents, function(person){
       return {
           text: person.displayName,
           items: _.map(person.children, function(child){
               return { text: child.displayName };
           })
       };