本文详解如何在JS前端将接口返回的二维数组转换为树形结构。通过一维化数据、去重、规范化节点以及递归构建子节点四个步骤，实现省市区等层级数据的正确展示，包含完整代码示例。
问题描述
在前端开发中，构建省市区等层级结构时，接口返回的数据往往不是树形格式，此时需要进行数据转换。以下以具体数据为例进行说明。
[
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"name": "杭州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872940,
"parentCode": "000001001",
"nodeCode": "000001001001",
"name": "上城区",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"name": "杭州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872961,
"parentCode": "000001001",
"nodeCode": "000001001002",
"name": "下城区",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"name": "杭州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872980,
"parentCode": "000001001",
"nodeCode": "000001001003",
"name": "临安区",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873196,
"parentCode": "000001",
"nodeCode": "000001002",
"name": "宁波市",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873432,
"parentCode": "000001",
"nodeCode": "000001003",
"name": "温州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873468,
"parentCode": "000001003",
"nodeCode": "000001003002",
"name": "平阳县",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873432,
"parentCode": "000001",
"nodeCode": "000001003",
"name": "温州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873486,
"parentCode": "000001003",
"nodeCode": "000001003003",
"name": "文成县",
"districtType": "HUADONG",
"districtTypeName": null
}
]
]
[
{
"label": "浙江省",
"value": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"children": [
{
"label": "杭州市",
"value": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"children": [
{
"label": "上城区",
"value": 1586533872940,
"parentCode": "000001001",
"nodeCode": "000001001001"
},
{
"label": "下城区",
"value": 1586533872961,
"parentCode": "000001001",
"nodeCode": "000001001002"
},
{
"label": "临安区",
"value": 1586533872980,
"parentCode": "000001001",
"nodeCode": "000001001003"
}
]
},
{
"label": "宁波市",
"value": 1586533873196,
"parentCode": "000001",
"nodeCode": "000001002"
},
{
"label": "温州市",
"value": 1586533873432,
"parentCode": "000001",
"nodeCode": "000001003",
"children": [
{
"label": "平阳县",
"value": 1586533873468,
"parentCode": "000001003",
"nodeCode": "000001003002"
},
{
"label": "文成县",
"value": 1586533873486,
"parentCode": "000001003",
"nodeCode": "000001003003"
}
]
}
]
}
]
实现步骤
首先，观察输入数据为二维数组，其中存储了省市区的所有数据。第一步需将二维数组转换为一维数组，以获取所有节点数据，为后续构建树形结构做准备。
let arr = [].concat.apply([], data)
其次，在获取所有需要构建树形结构的数据后，发现数组中存在重复数据，需要进行处理。
arrayToTree(data, rootNode) {
let temp = {}
let reduceArr = data.reduce((current, next) => {
temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
return current
},[])
}
接着，对数据进行规范化处理，将所有数据处理成符合要求的节点数据格式。
arrayToTree(data, rootNode) {
let temp = {}
let reduceArr = data.reduce((current, next) => {
temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
return current
},[])
// 2.数组规范化
let result = []
reduceArr.forEach(item => {
result.push({
label:item.name,
value:item.districtId,
parentCode:item.parentCode,
nodeCode:item.nodeCode,
children: []
})
})
}
最后，采用递归的方式构建树形结构，生成最终的层级数据。
getTreeList(data, rootNode, list,{label, value,parentCode, nodeCode, children}) {
// 构建父节点
data.forEach(item =>{
if (item.parentCode === rootNode) {
list.push(item)
}
})
list.forEach(item => {
item.children = []
// 构建子节点
this.getTreeList(data, item.nodeCode, item.children,{label, value,parentCode, nodeCode, children});
// 删除空叶子节点
if (item.children.length === 0) {
delete item.children;
}
})
return list;
}
完整代码
arrayToTree(data, rootNode, {label = 'label', value = 'value',parentCode = 'parentCode', nodeCode = 'nodeCode', children = ''} = {}) {
// 1.数组去重
let temp = {}
let reduceArr = data.reduce((current, next) => {
temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
return current
},[])
// 2.数组规范化
let result = []
reduceArr.forEach(item => {
result.push({
label:item.name,
value:item.districtId,
parentCode:item.parentCode,
nodeCode:item.nodeCode,
children: []
})
})
// 3.构建树形结构
return this.getTreeList(result,rootNode,[],{
label,value,parentCode,nodeCode,children
});
},
// 递归构建树形结构
getTreeList(data, rootNode, list,{label, value,parentCode, nodeCode, children}) {
data.forEach(item =>{
if (item.parentCode === rootNode) {
list.push(item)
}
})
list.forEach(item => {
item.children = []
this.getTreeList(data, item.nodeCode, item.children,{label, value,parentCode, nodeCode, children});
if (item.children.length === 0) {
delete item.children;
}
})
return list;
},以上就是JS前端二维数组生成树形结构示例详解的详细内容，更多关于JS二维数组树形结构的资料请关注本站其它相关文章！