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

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

为每个人添加子属性

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

创建数据的哈希值，其中person的索引为键，person为值

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

人物对象看起来像这样：

{
   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.
}

将每个孩子添加到其父母的孩子身上：

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

这会留下一棵树。

然后，您可以将此树转换为您喜欢的任何树。此代码段将在问题中生成输出：

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 };
        })
    };

Answer 2

我做了以下似乎与一个小问题一起工作。我为一些孩子准备了一个空项目数组。如果项目的数组为空，我宁愿没有任何内容。

添加子项和文本属性

= _.each(results.data, function (entity) {
          _.extend(entity, { text: entity.displayName });
          _.extend(entity, { items: [] });
   });

像以前一样创建哈希

  = _.reduce(results.data, function (memo, entities) {
                    memo[entities.entIndex] = entities;
                    return memo;
                }, {});

像以前一样将每个孩子添加到父级

= _.each(results.data, function (entity) {
    if (!_.isNull(entity.parEntIndex)) ent[entity.parEntIndex].items.push(entity);
                });

4

function isParent (entity) {
                    return !_.isEmpty(entity.items) && entity.theLev == 1;
                }

                var test = _.filter(combine, isParent);

                var result = _.map(test, function (currentObject) {
                    return _.pick(currentObject,'text','items');
                });

如何使用纯Javascript或像下划线这样的库动态构建树形图？

2 个答案: