使用 lodash 从平面列表创建树

Question

我正在尝试使用下面的 json objects 数组创建类别树。我想将一个类别设置为另一个类别的 child，如果它的 parent 等于另一个类别的 ID，并且我希望 posts 也成为 children该类别而不是 posts 有一个单独的字段，我将添加一个标志字段，如果它是一个类别或不是 isParent。

它看起来工作正常，但如您所见，如果一个类别同时具有类别和 post 作为 child，它只会显示类别。另一个问题是如果 post 在它的数组上有一个空值，它仍然会把它们推送为 children.

我的代码中有哪些错误，或者是否有更简单或更好的解决方案？

var tree = unflatten(getData());
var pre = document.createElement('pre');
console.log(tree);
pre.innerText = JSON.stringify(tree, null, 4);

document.body.appendChild(pre);

function unflatten(array, parent, tree) {
  tree = typeof tree !== 'undefined' ? tree : [];
  parent = typeof parent !== 'undefined' ? parent : {
    id: 0
  };
  _.map(array, function(arr) {
    _.set(arr, 'isParent', true);
  });
  var children = _.filter(array, function(child) {
    return child.parent == parent.id;
  });

  if (!_.isEmpty(children)) {
    if (parent.id == 0) {
      tree = children;
    } else {
      parent['children'] = children;
    }
    _.each(children, function(child) {
      var posts = _.map(child.posts, function(post) {
        return _.set(post, 'isParent', false);
      });
      child['children'] = posts;
      delete child.posts;
      unflatten(array, child);
    });
  }

  return tree;

}

function getData() {
  return [{
    "id": "c1",
    "parent": "",
    "name": "foo",
    "posts": [{
      "id": "p1"
    }]
  }, {
    "id": "c2",
    "parent": "1",
    "name": "bar",
    "posts": [{
      "id": "p2"
    }]
  }, {
    "id": "c3",
    "parent": "",
    "name": "bazz",
    "posts": [
      null
    ]
  }, {
    "id": "c4",
    "parent": "3",
    "name": "sna",
    "posts": [{
      "id": "p3"
    }]
  }, {
    "id": "c5",
    "parent": "3",
    "name": "ney",
    "posts": [{
      "id": "p4"
    }]
  }, {
    "id": "c6",
    "parent": "5",
    "name": "tol",
    "posts": [{
      "id": "p5"
    }, {
      "id": "p6"
    }]
  }, {
    "id": "c7",
    "parent": "5",
    "name": "zap",
    "posts": [{
      "id": "p7"
    }, {
      "id": "p8"
    }, {
      "id": "p9"
    }]
  }, {
    "id": "c8",
    "parent": "",
    "name": "quz",
    "posts": [
      null
    ]
  }, {
    "id": "c9",
    "parent": "8",
    "name": "meh",
    "posts": [{
      "id": "p10"
    }, {
      "id": "p11"
    }]
  }, {
    "id": "c10",
    "parent": "8",
    "name": "ror",
    "posts": [{
      "id": "p12"
    }, {
      "id": "p13"
    }]
  }, {
    "id": "c11",
    "parent": "",
    "name": "gig",
    "posts": [{
      "id": "p14"
    }]
  }, {
    "id": "c12",
    "name": "xylo",
    "parent": "",
    "posts": [{
      "id": "p15"
    }]
  }, {
    "id": "c13",
    "parent": "",
    "name": "grr",
    "posts": [{
      "id": "p16"
    }, {
      "id": "p17"
    }, {
      "id": "p14"
    }, {
      "id": "p18"
    }, {
      "id": "p19"
    }, {
      "id": "p20"
    }]
  }]
}

<script src="//cdn.jsdelivr.net/lodash/3.10.1/lodash.min.js"></script>

预期输出

所以预期的输出将更像：

[
   {
       id: 'c1',
       isParent: true,
       children: [
          {
             id: 'c2',
             isParent: true,
             children: []
          },
          {
             id: 'p1'
             isParent: false
          }
       ]
   }
]

等等..

Answer 1

我做了一个小fidde，我认为这就是你想要的。

http://jsfiddle.net/tx3uwhke/

var tree = buildTree(getData());
var pre = document.getElementById('a');
var jsonString = JSON.stringify(tree, null, 4);
console.log(jsonString);
pre.innerHTML = jsonString;

document.body.appendChild(pre);

function buildTree(data, parent){
    var result = [];
    parent = typeof parent !== 'undefined' ? parent : {id:""};
    children = _.filter(data, function(value){
        return value.parent === parent.id;
    });
    if(!_.isEmpty(children)){
        _.each(children, function(child){
            if (child != null){
                result.push(child);
                if(!_.isEmpty(child.posts)){
                    var posts = _.filter(child.posts, function(post){
                        return post !== null && typeof post !== 'undefined';
                    });
                    if(!_.isEmpty(posts)){
                        _.forEach(posts, function(post){
                            post.isParent = false;
                        });
                    }
                    result = _.union(result, posts);
                    delete child.posts;
                }
                ownChildren = buildTree(data, child);
                if(!_.isEmpty(ownChildren)){
                    child.isParent = true;
                    child.children = ownChildren;
                }else{
                    child.isParent = false;
                }
            }
        });
    }
    return result;
}

编辑：制作了一个新的 fiddle 来包含 isParent 部分你可以找到它 here

Answer 2

你的代码非常命令。尝试专注于数据流"big picture"而不是trial-and-error写代码。这更难，但你会得到更好的结果（而且，事实上，通常它更快）:)

我的想法是首先按 parents 对类别进行分组。这是我的解决方案的第一行，之后实际上变得容易多了。

_.groupBy and _.keyBy 帮助很大:

function makeCatTree(data) {
    var groupedByParents = _.groupBy(data, 'parent');
    var catsById = _.keyBy(data, 'id');
    _.each(_.omit(groupedByParents, ''), function(children, parentId) {
        catsById['c' + parentId].children = children; 
    });
    _.each(catsById, function(cat) {
        // isParent will be true when there are subcategories (this is not really a good name, btw.)
        cat.isParent = !_.isEmpty(cat.children); 
        // _.compact below is just for removing null posts
        cat.children = _.compact(_.union(cat.children, cat.posts));
        // optionally, you can also delete cat.posts here.
    });
    return groupedByParents[''];
}

我建议在开发者控制台中尝试每个部分，然后就会变得容易理解。

使用 lodash 从平面列表创建树

Creating a tree from a flat list using lodash

javascript

tree

lodash