【问题标题】:Nesting a parent child relationship in lodash, given the parent id and children给定父 ID 和子代,在 lodash 中嵌套父子关系
【发布时间】:2015-10-28 06:06:11
【问题描述】:

如果将父级及其子级作为属性给出,我将如何嵌套 json 对象。

数据如下:

   "1": {
        "id": 1,
        "name": "foo",
        "parent": null,
        "root": 1,
        "children": [2, 4, 6],
        "posts":[
            { "id": "1", "name": "item1" },
            { "id": "2", "name": "item2" },
            { "id": "3", "name": "item3" }
        ]
    },
    "2": {
        "id": 2,
        "name": "bar",
        "parent": 1,
        "root": 1,
        "children": null,
        "posts":[
            { "id": "4", "name": "item4" }
        ]
    },
    "3": {
        "id": 3,
        "name": "bazz",
        "parent": null,
        "root": 3,
        "children": [5, 7],
        "posts":[
            { "id": "5", "name": "item5" },
            { "id": "6", "name": "item6" }
        ]
    },
   ....

使用 lodash 的简单 groupby 不会这样做。

var group = _.groupBy(data, 'parent');

这是一个小提琴:

http://jsfiddle.net/tzugzo8a/1/

问题的上下文是一个带有子类别的嵌套类别,类别中可以有类别和帖子。

基本上我不想为子级和帖子设置不同的属性,因为它们都是父级的子级。

期望的输出

    "1": {
        "id": 1,
        "name": "foo",
        "parent": null,
        "root": 1,
        "isCategory": true,
        "children": [
             {
                 "id": 2,
                 "name": "bar",
                 "parent": 1,
                 "root": 1,
                 "isCategory": true,
                 "children": null
             },
             { "id": "1", "name": "item1", isCategory: false },
             { "id": "2", "name": "item2", isCategory: false },
             { "id": "3", "name": "item3", isCategory: false }

        ]
        ...
    }

【问题讨论】:

    标签: javascript jquery parent-child lodash


    【解决方案1】:

    这是我对这个问题的看法 (fiddle):

    var data = getData();
    
    var group = getTree(data);
    
    console.log(group);
    
    function getTree(flat) {
        return _.reduce(flat, function (treeObj, item, prop, flatTree) {
            var children = _.map(item.children, function (childId) {
                return _.set(flatTree[childId], 'isCategory', true);
            }).concat(_.map(item.items, function(item) {
                return _.set(item, 'isCategory', false);
            }));
    
            item.children = !!children.length ? children : null;
    
            delete item.items;
    
            item.parent === null && (treeObj[prop] = item);
    
            return treeObj;
        }, {});
    }
    

    【讨论】:

      【解决方案2】:

      看看更新后的fiddle

      var data = getData();
      
      _.keys(data).forEach(function(id){
          var element = data[id];
          if (element.children === null){
              element.children = [];
          }
      
          element.isCategory = true;
          element.items.forEach(function(item){
              item.isCategory = false;
          })
      });
      
      _.keys(data).forEach(function(id){
          var element = data[id];
          element.children = element.children.map(function(childId){
            return data[childId];
          }).concat(element.items);
      });
      
      _.keys(data).forEach(function(id){
          delete data[id].items;
      });
      
      console.log(JSON.stringify(_.findWhere(_.values(data), {'parent': null})));
      

      【讨论】:

      • @JoeyHipolito 你能更具体一点吗?您将解决方案更新为所需的输出有多难?我认为您将受益于自己的工作和更改代码,而不是盲目复制/粘贴
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-11-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多