vue 后端返回一个多级数组 需要转换成两层 如 let a = [{parentname:a公司,children:[sonName:b部门-c景区]}]的格式展示
时间: 2024-02-21 16:57:48 浏览: 64
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
可以使用循环遍历的方式来将多级数组转换成两层的格式。具体的思路是,首先遍历所有节点,将节点分类成根节点和子节点,然后对于每个根节点,再遍历所有节点,将其子节点添加到根节点的 children 数组中。最终得到的数据格式就是两层的。
下面是一个示例代码,假设数据格式如下:
```javascript
const data = [
{
code: 'C001',
name: '公司1',
parentCode: null
},
{
code: 'D001',
name: '部门1',
parentCode: 'C001'
},
{
code: 'S001',
name: '景区1',
parentCode: 'D001'
},
{
code: 'D002',
name: '部门2',
parentCode: 'C001'
},
{
code: 'S002',
name: '景区2',
parentCode: 'D002'
},
{
code: 'C002',
name: '公司2',
parentCode: null
}
];
```
代码实现如下:
```javascript
function processMultiLevelData(data) {
const rootNodes = [];
const childNodes = [];
for (let i = 0; i < data.length; i++) {
const item = data[i];
if (item.parentCode === null) {
rootNodes.push({
code: item.code,
name: item.name,
children: []
});
} else {
childNodes.push({
code: item.code,
name: item.name,
parentCode: item.parentCode
});
}
}
for (let i = 0; i < rootNodes.length; i++) {
const rootNode = rootNodes[i];
for (let j = 0; j < childNodes.length; j++) {
const childNode = childNodes[j];
if (childNode.parentCode === rootNode.code) {
const sonNode = {
name: childNode.name,
children: []
};
rootNode.children.push(sonNode);
for (let k = 0; k < childNodes.length; k++) {
const grandChildNode = childNodes[k];
if (grandChildNode.parentCode === childNode.code) {
const grandSonNode = {
name: grandChildNode.name,
children: []
};
sonNode.children.push(grandSonNode);
}
}
}
}
}
const result = rootNodes.map(item => {
return {
parentname: item.name,
children: item.children.map(childItem => {
return {
sonName: childItem.name,
children: childItem.children.map(grandChildItem => {
return {
sonName: grandChildItem.name,
children: []
};
})
};
})
};
});
return result;
}
const result = processMultiLevelData(data);
console.log(result);
```
上述代码中,首先将所有节点分类成根节点和子节点,并分别保存在 `rootNodes` 和 `childNodes` 数组中。然后遍历 `rootNodes` 数组,对于每个根节点,再遍历 `childNodes` 数组,将其子节点添加到根节点的 children 数组中。最终得到的 `rootNodes` 数组就是两层的数据格式。
需要注意的是,在实际开发中,我们可能需要对返回的数据进行进一步处理,将其转换成需要的格式。上述代码中的 `result` 数组包含了所有节点的数据,其中根节点的数据格式为 `{parentname: 公司名称, children: 部门数据数组}`,部门数据数组中每个元素的格式为 `{sonName: 部门名称, children: 景区数据数组}`,景区数据数组中每个元素的格式为 `{sonName: 景区名称, children: []}`。
阅读全文