このようなツリーの生成方法は？

Question

ディープネストされた要素を含むドロップダウンを生成しようとしています。 受信データ：

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' }

私は親を知っていると私はテンプレートに反応のツリーを生成します。 このようになるだろう： 結果：あなたは次のことを試すことができ

[{ 
 
    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' 
 
    } 
 

 
]

Answer 1

あなたは同じidへのすべての参照を保持するための一時的なオブジェクトを取り、部品でツリーを構築することができます。

これはソートされていないデータでも機能します。

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

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

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のための時間がかかるが、あなたのオブジェクトを見ても何渡されたJSONバリデータをworgされません。

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