js 实现 多层级对象合并
首先
需求是使用js对数据的格式进行转换 把一个二维数组(包含层级信息,层级数是不固定的)list 转换为多层级的对象
我的思路就是 循环先把list里单条信息转换为 多层级对象 然后和上一条 进行合并
原数据类型:
[{
id:a_a1_a2,
value:1
},{
id:a_a2_a2,
value:2
},{
id:b_b1,
value:3
}]
分别转换为:
[a{
a1{
a2:1
}
}]
[a{
a2{
a2:2
}
}]
[b{
b1:3
}]
最终合并效果:
{a{
a1{
a2:1
},
a2{
a2:2
}
},
b{
b1:3
}
}
onSubmit(): void {
// 整理 item 数据
let itemsListInfo = {};
//this.addItemListData 存放的原始数据
for (let i = 0; i < this.addItemListData.length; i++) {
const itemTree = this.addItemListData[i].id.split('_');
// 按照格式整理 当前item
let thisItemInfo = {};
for (let y = itemTree.length - 1; y >= 0; y--) {
if (y === itemTree.length - 1) {
thisItemInfo[itemTree[y]] = this.addItemListData[i].value;
} else {
// 如果直接赋值 会出现问题 需要使用另一个变量暂存
const data = thisItemInfo;
thisItemInfo = {};
thisItemInfo[itemTree[y]] = data;
}
}
console.log(thisItemInfo);
// 合并当前item 到itemListInfo
const itemTreeIndex = 0;
itemsListInfo = this.margeItem(itemsListInfo, thisItemInfo, itemTree, itemTreeIndex, this.addItemListData[i]);
}
}
margeItem(itemsListInfo: any, thisItemInfo: any, itemTree: any, itemTreeIndex: number, addItemListData: any): any {
// 递归 判断是否存在相同层级
// 直到 没有相同层级后 合并对象到上一级
// 注意 如果是初次进入(没有上一级) 就直接赋值
if (itemsListInfo.hasOwnProperty(itemTree[itemTreeIndex])) {
itemsListInfo[itemTree[itemTreeIndex]]
= this.margeItem(
itemsListInfo[itemTree[itemTreeIndex]],
thisItemInfo[itemTree[itemTreeIndex]],
itemTree,
itemTreeIndex + 1,
addItemListData
);
return itemsListInfo;
} else {
let lastData = {};
if (itemsListInfo.hasOwnProperty(itemTree[itemTreeIndex - 1])) {
lastData = itemsListInfo[itemTree[itemTreeIndex - 1]];
lastData[itemTree[itemTreeIndex]] = thisItemInfo[itemTree[itemTreeIndex]];
} else {
lastData = thisItemInfo[itemTree[itemTreeIndex]];
}
itemsListInfo[itemTree[itemTreeIndex]] = lastData;
return itemsListInfo;
}
}
最后itemsListInfo就是我需要的最终格式
