Question

尝试使用深层嵌套元素生成下拉列表。传入数据：

＆＃13;

111: {id: 111, name: '111' },
222: {id: 222, name: '222' },
333: {id: 333, name: '333', parent: {id: 222} },
444: {id: 444, name: '444', parent: {id: 333} },
555: {id: 555, name: '555' }

＆＃13;

我只知道父母，我想为React模板生成一棵树。它会是这样的：结果：

＆＃13;

[{
    id: 111,
    name: '111'
  },
  {
    id: 222,
    name: '222',
    children: [{
        id: 333,
        name: '333',
        parent: {
          id: 222
        },
        children: [{
          id: 444,
          name: '444',
          parent: {
            id: 333
          }
        }]
      }
    ]
  },
   {
     id: 555,
      name: '555'
   }

]

＆＃13;

Answer 1

您可以使用临时对象来保留对同一id的所有引用，并使用这些部分构建树。

这也适用于未分类的数据。

＆＃13;

var data = { 111: { id: 111, name: '111' }, 222: { id: 222, name: '222' }, 333: { id: 333, name: '333', parent: { id: 222 } }, 444: { id: 444, name: '444', parent: { id: 333 } }, 555: { id: 555, name: '555' } },
    tree = function (object, root) {
        var r = [], o = {};
        Object.keys(object).forEach(function (k) {
            var id = object[k].id;
            o[id] = Object.assign(o[id] || {}, object[k]);
            if (o[id].parent === root) {
                r.push(o[id]);
            } else {
                o[o[id].parent.id] = o[o[id].parent.id] || {};
                o[o[id].parent.id].children = o[o[id].parent.id].children || [];
                o[o[id].parent.id].children.push(o[id]);
            }
        });
        return r;
    }(data, undefined);

console.log(tree);

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

Answer 2

您可以尝试以下操作。你可以用它来解决n级嵌套。

var obj = {
  111: {id: 111, name: '111' },
  222: {id: 222, name: '222' },
  333: {id: 333, name: '333', parent: {id: 222} },
  444: {id: 444, name: '444', parent: {id: 333} },
  555: {id: 555, name: '555' }
};

// Iterate over the object keys and create the tree and only push items which have no parent in response
var response = [];
Object.keys(obj).forEach(function(key) {
  var item = obj[key];
  if (item.parent) {
    obj[item.parent.id].children = obj[item.parent.id].children || [];
    obj[item.parent.id].children.push(obj[key]);
  } else {
    response.push(obj[key]);
  }
});

console.log(response);

Answer 3

我花了一点时间make a demo，但看看你的对象是worg没有通过任何json验证器。

var _data = [{
  id: '111',
  name: '111'
}, {
  id: '222',
  name: '222',
  children: [
    {
      id: '333',
      name: '333',
      parent: {
        id: '222'
      },
      children: [
        {
          id: '444',
          name: '444',
          parent: {
            id: '333'
          }
        }
      ]

    }]
  }
];
console.log(_data);
function make(arr){
  var _arr = [];
  function _do(arr, _parent){
    for(var i=0; i<arr.length;i++){
        var _o = {
          id: arr[i].id,
          name: arr[i].name
        };
        if(_parent){
          _o.parent = _parent;
        }
        if(arr[i].children){
          _do(arr[i].children, arr[i].id);
        }
        _arr[arr[i].id] = _o;
    }
  }
  _do(arr);
  return _arr
};
console.log(make(_data));

如何生成这样的树？

3 个答案: