需求:將數組對象轉化成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;
}