javascript - 将具有父 Owner 属性的数组映射到具有子属性的数组
问题描述
您好我正在尝试映射一个数组,如下所示:
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 上尝试了以下操作:
Step1:拥有具有各自级别的单独数组
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'});
Step2:循环 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);
}
}}
但是我的循环卡住了,使我的浏览器崩溃是我的方法有什么问题,或者有更好的方法来做到这一点。
解决方案
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[""]);
推荐阅读
- python - 基于时间片在for循环中创建新数组
- apache-kafka - 如何将 Kafka 与 OpenID-Connect 结合使用?
- php - 使用 jQuery post 方法发送表单数据不起作用
- php - CakePHP 3.8 或 4.0,基于 SendGrid 和 Twig 支持?
- sql - 有没有办法在 SQL 的 where 子句中使用表值属性
- javascript - 过滤一个 JavaScript 对象数组 另一个 JavaScript 对象数组
- java - Java重置循环,因此可以从无限循环的开始读取文件
- javascript - 最接近的 jQuery 函数仅返回第一行的值
- next.js - 如何使 react-native-paper 与 next.js 一起工作?
- php - PHP - 根据另一个时间段检查时间段