javascript - 将具有父 Owner 属性的数组映射到具有 child 属性的数组

Question

您好，我正在尝试映射一个数组，如下所示:

var currentModel = [{id: 'Iron Man (CPC Avengers)', label: 'Iron Man', unit: 'CPC Avengers', level: '2', parent: '', children: []}, {id: 'Thor (Avengers Core Asgard)', label: 'Thor', unit: 'Avengers Core Asgard', level: '3', parent: 'Iron Man', children: []}, {id: 'Loki (Avengers Asgard)', label: 'Loki', unit: 'Avengers Asgard', level: '4', parent: 'Thor', children: []}, {id: 'Hela (Avengers Asgard)', label: 'Hela', unit: 'Avengers Asgard', level: '4', parent: 'Thor', children: []}, {id: 'Groot (Guardians of Galaxy)', label: 'Groot', unit: 'Guardians of Galaxy', 'level: '5', parent: 'Loki', children: []}, {id: 'Captain America (Avengers Core Earth)', label: 'Captain America', unit: 'Avengers Core Earth', level: '3', parent: 'Iron Man', children: []}, {id: 'Black Widow (Avengers Earth)', label: 'Black Widow', unit: 'Avengers Earth', level: '4', parent: 'Captain America', children: []}, {id: 'Hulk (Avengers Earth)', label: 'Hulk', unit: 'Avengers Earth', level: '4', parent: 'Captain America', children: []}]

进入下面的数组

var requiredModel = [ {id: 'Iron Man (CPC Avengers)', label: 'Iron Man', unit: 'CPC Avengers', level: '2', parent: '', children: [ { id: 'Thor (Avengers Core Asgard)', label: 'Thor', unit: 'Avengers Core Asgard', level: '3', parent: 'Iron Man', children: [ { id: 'Loki (Avengers Asgard)', label: 'Loki', unit: 'Avengers Asgard', level: '4', parent: 'Thor', children: [ { id: 'Groot (Guardians of Galaxy)', label: 'Groot', unit: 'Guardians of Galaxy', level: '5', parent: 'Loki', children: []} ]}, {id: 'Hela (Avengers Asgard)', label: 'Hela', unit: 'Avengers Asgard', level: '4', parent: 'Thor', children: []}]},{id: 'Captain America (Avengers Core Earth)', label: 'Captain America', unit: 'Avengers Core Earth', level: '3', parent: 'Iron Man', children: [{ id: 'Black Widow (Avengers Earth)', label: 'Black Widow', unit: 'Avengers Earth', level: '4', parent: 'Captain America', children:[]}, { id: 'Hulk (Avengers Earth)', label: 'Hulk', unit: 'Avengers Earth', level: '4', children: []}]}]}]

我在 currentModel 上尝试了以下操作:

第1步:拥有具有各自级别的单独数组

var currentModelLvl2= currentModel.filter(function(item){ return item.level === '2'}); var currentModelLvl3= currentModel.filter(function(item){ return item.level === '3'}); var currentModelLvl4= currentModel.filter(function(item){ return item.level === '4'}); var currentModelLvl5= currentModel.filter(function(item){ return item.level === '5'});

第2步:循环currentModelLvl4和currentModelLvl5，并将currentModelLvl5中的项目添加到currentModelLvl4的子数组中，其中currentModelLvl4.label === currentModelLvl5.parent

for (var i = 0; i < currentModelLvl4.length; i++) {
var currentModelItem4 = currentModelLvl4[i];
for (var j = 0; j < currentModelLvl5.length; j++) {
    var currentModelItem5 = currentModelLvl4[j];
    if (currentModelItem4.label === currentModelItem5.parent) {
        currentModelItem4.children.push( currentModelItem5);
    }
}}

但是我的循环卡住了，导致浏览器崩溃，这是我的方法有问题，还是有更好的方法来做到这一点。

Answer 1

var currentModel = [{id: 'Iron Man (CPC Avengers)', label: 'Iron Man', unit: 'CPC Avengers', level: '2', parent: '', children: []}, {id: 'Thor (Avengers Core Asgard)', label: 'Thor', unit: 'Avengers Core Asgard', level: '3', parent: 'Iron Man', children: []}, {id: 'Loki (Avengers Asgard)', label: 'Loki', unit: 'Avengers Asgard', level: '4', parent: 'Thor', children: []}, {id: 'Hela (Avengers Asgard)', label: 'Hela', unit: 'Avengers Asgard', level: '4', parent: 'Thor', children: []}, {id: 'Groot (Guardians of Galaxy)', label: 'Groot', unit: 'Guardians of Galaxy', level: '5', parent: 'Loki', children: []}, {id: 'Captain America (Avengers Core Earth)', label: 'Captain America', unit: 'Avengers Core Earth', level: '3', parent: 'Iron Man', children: []}, {id: 'Black Widow (Avengers Earth)', label: 'Black Widow', unit: 'Avengers Earth', level: '4', parent: 'Captain America', children: []}, {id: 'Hulk (Avengers Earth)', label: 'Hulk', unit: 'Avengers Earth', level: '4', parent: 'Captain America', children: []}];

var children = {};
currentModel.forEach(model => {
  children[model.parent] = children[model.parent] || [];
  children[model.parent].push(model);
  children[model.label] = model.children = children[model.label] || model.children;
});

console.log(children[""]);