需求:将数组对象转化成elementUI中树形控件的数据结构形式,没有父子级id区分。同时,判断一级目录、二级目录是否都相同;判断一级目录是否相同,如果一级目录相同则将二级目录及以下都放到相同的一级目录下。
Talk is cheap,show you the code.
将以下数组对象:
let info = [
{
code: "7CE2D88A",
gateway_name: "空调机组3号",
longitude: "120.1054122",
latitude: "30.3078394",
first_level: "杭州市",
second_level: "西湖区"
},
{
code: "B4F8C9C4",
gateway_name: "空调机组1号",
longitude: "121.3682650",
latitude: "31.1419520",
first_level: "上海市",
second_level: "闵行区"
},
{
code: "EA90B25C",
gateway_name: "测试1号",
longitude: "121.3682650",
latitude: "31.1419520",
first_level: "上海市",
second_level: "闵行区"
},
{
code: "A7613898",
gateway_name: "测试2号",
longitude: "121.3682650",
latitude: "31.1419520",
first_level: "上海市",
second_level: "静安区"
},
{
code: "C7DB5C30",
gateway_name: "空调机组2号",
longitude: "121.3682650",
latitude: "118.915388",
first_level: "南京市",
second_level: "江宁区"
}
]
转换成这样
[
{
label: '杭州市',
children: [
{
label: '西湖区',
children: [
{
label: '空调机组3号',
code: "7CE2D88A",
longitude: "120.1054122",
latitude: "30.3078394"
}
]
}
]
},
{
label: '上海市',
children: [
{
label: '闵行区',
children: [
{
label: '空调机组1号',
code: "B4F8C9C4",
longitude: "121.3682650",
latitude: "31.1419520"
},
{
label: "测试1号",
code: "EA90B25C",
longitude: "121.3682650",
latitude: "31.1419520"
}
]
},
{
label: '静安区',
children: [
{
label: '测试2号',
code: "A7613898",
longitude: "121.3682650",
latitude: "31.1419520"
}
]
}
]
},
{
label: '南京市',
children: [
{
label: '江宁区',
children: [
{
label: '空调机组2号',
code: "C7DB5C30",
longitude: "121.3682650",
latitude: "118.915388",
}
]
}
]
}
]
以下是我封装的js,如有相同需求可以直接拿来用。如有更简洁、更好的写法欢迎各位大佬指点!
function treeData (data) {
var newData = [], hash = {};
for (let i = 0; i < data.length; i++) {
if (!hash[data[i].first_level]) {
hash[data[i].first_level] = {
'label': data[i].first_level
};
hash[data[i].first_level]['children'] = [{
'label': data[i].second_level
}];
for (let j = 0; j < hash[data[i].first_level].children.length; j++) {
hash[data[i].first_level].children[j]['children'] = [{
'label': data[i].gateway_name,
'code': data[i].code,
'long': data[i].longitude,
'lat': data[i].latitude,
}];
}
newData.push(hash[data[i].first_level]);
} else {
try {
for (let k = 0; k < hash[data[i].first_level].children.length; k++) {
if (hash[data[i].first_level].label == data[i].first_level &&
hash[data[i].first_level].children[k].label == data[i].second_level) { // 判断一级目录、二级目录都相同
hash[data[i].first_level].children[k]['children'].push({
'label': data[i].gateway_name,
'code': data[i].code,
'long': data[i].longitude,
'lat': data[i].latitude,
})
throw new Error()
}
}
if (hash[data[i].first_level].label == data[i].first_level) { // 判断一级目录相同
hash[data[i].first_level]['children'].push({
'label': data[i].second_level,
'children': [{
'label': data[i].gateway_name,
'code': data[i].code,
'long': data[i].longitude,
'lat': data[i].latitude,
}]
})
}
} catch (error) {
console.log(error)
}
}
}
return newData;
}