原数据格式：
const data = [
{
sgbh: "20200701003",
qywz: "分离器1",
ch: "1",
cwmc: "T2l4雷四段",
},
{
sgbh: "20200701003",
qywz: "分离器1",
ch: "1",
cwmc: "T2l4雷三段",
},
{
sgbh: "20200701003",
qywz: "分离器3",
ch: "2",
cwmc: "T2l4雷四段",
},
]
处理后数据格式：
[
{
value: '分离器1',
label: '分离器1',
children: [
{
value: '1',
label: '1',
children: [
{
value: 'T2l4雷三段',
label: 'T2l4雷三段'
},
{
value: 'T2l4雷四段',
label: 'T2l4雷四段'
}
]
}
]
},
{
value: '分离器3',
label: '分离器3',
children: [
{
value: '2',
label: '2',
children: [
{
value: 'T2l4雷四段',
label: 'T2l4雷四段'
}
]
}
]
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const data = [
{
sgbh: "20200701003",
qywz: "分离器1",
ch: "1",
cwmc: "T2l4雷四段",
},
{
sgbh: "20200701003",
qywz: "分离器1",
ch: "1",
cwmc: "T2l4雷三段",
},
{
sgbh: "20200701003",
qywz: "分离器3",
ch: "2",
cwmc: "T2l4雷四段",
},
]
const getDelData = (arr) => {
let map = new Map()
for (let item of arr) {
const temp = item.qywz
if (!map.has(temp)) {
const children = [
{
value: item.ch,
label: item.ch,
children: [
{
value: item.cwmc,
label: item.cwmc
}
]
}
]
const obj = {
value: item.qywz,
label: item.qywz,
children
}
map.set(temp, obj)
} else {
const _this = map.get(temp)
for (let i = 0; i < _this.children.length; i++) {
if (item.ch == _this.children[i].value) {
for (let j = 0; j < _this.children[i].children.length; j++) {
if (item.cwmc == _this.children[i].children[j].value) {
break
} else {
_this.children[i].children.push({
value: item.cwmc,
label: item.cwmc
})
}
}
}
}
map.set(temp, _this)
}
}
return [...map.values()]
}
console.log('arr', getDelData(data))
</script>
</body>
</html>
const data = [
{
sgbh: '20200701003',
qywz: '分离器1',
ch: '1',
cwmc: 'T2l4雷四段',
},
{
sgbh: '20200701003',
qywz: '分离器1',
ch: '1',
cwmc: 'T2l4雷三段',
},
{
sgbh: '20200701003',
qywz: '分离器3',
ch: '2',
cwmc: 'T2l4雷四段',
},
]
const fun = (d, key, hasChildren) => {
const res = d.sort((i1, i2) => i1[key] > i2[key] ? 1 : -1)
const m = new Map()
res.forEach(item => {
if (!m.has(item[key])) {
m.set(item[key], [])
}
m.get(item[key]).push(item)
})
const r = []
for (const k of m.keys()) {
const o = {
value: k,
label: k,
}
if (hasChildren) {
o['children'] = m.get(k)
}
r.push(o)
}
return r
}
let m = fun(data, 'qywz', true)
m.forEach(item => {
let m1 = fun(item.children, 'ch', true)
m1.forEach(i => {
i.children = fun(i.children, 'cwmc', false)
})
item.children = m1
})
console.log(JSON.stringify(m, null, 2))
排序指的是？按什么排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const data = [
{
sgbh: "20200701003",
qywz: "分离器1",
ch: "1",
cwmc: "T2l4雷四段",
},
{
sgbh: "20200701003",
qywz: "分离器1",
ch: "1",
cwmc: "T2l4雷三段",
},
{
sgbh: "20200701003",
qywz: "分离器3",
ch: "2",
cwmc: "T2l4雷四段",
},
{
sgbh: "20200701003",
qywz: "分离器3",
ch: "2",
cwmc: "T2l4雷四段",
},
]
new_Data = data
// 第二步 数据合并
let new_result = [];
new_Data.forEach((item, index) => {
if (new_result.length > 0) {
let new_index = new_result.findIndex((zitem, index) => {
return zitem.label === item.qywz
})
if (new_index == -1) {
new_result.push({
value: item.qywz,
label: item.qywz,
children: [
{
value: item.ch,
label: item.ch,
children: [
{
value: item.cwmc,
label: item.cwmc
}
]
}
]
})
} else {
let new_children_index = new_result[new_index].children.findIndex((zitem, index) => {
return zitem.label === item.ch
})
if (new_children_index == -1) {
new_result[new_index].children.push({
value: item.ch,
label: item.ch,
children: [
{
value: item.cwmc,
label: item.cwmc
}
]
})
} else {
let new_children_children_index = new_result[new_index].children[new_children_index].children.findIndex((zitem, index) => {
return zitem.label === item.cwmc
})
console.log(new_children_children_index, '====new_children_children_index')
if (new_children_children_index == -1) {
new_result[new_index].children[new_children_index].children.push({
value: item.cwmc,
label: item.cwmc
})
}
}
}
} else {
new_result.push({
value: item.qywz,
label: item.qywz,
children: [
{
value: item.ch,
label: item.ch,
children: [
{
value: item.cwmc,
label: item.cwmc
}
]
}
]
})
}
})
console.log(JSON.stringify(new_result, null, 2), '===new_result')
// let result = [
// {
// value: '分离器1',
// label: '分离器1',
// children: [
// {
// value: '1',
// label: '1',
// children: [
// {
// value: 'T2l4雷三段',
// label: 'T2l4雷三段'
// },
// {
// value: 'T2l4雷四段',
// label: 'T2l4雷四段'
// }
// ]
// }
// ]
// },
// {
// value: '分离器3',
// label: '分离器3',
// children: [
// {
// value: '2',
// label: '2',
// children: [
// {
// value: 'T2l4雷四段',
// label: 'T2l4雷四段'
// }
// ]
// }
// ]
// }
// ]
</script>
</body>
</html>
将js数组对象转换为三级联动数据格式并去重排序
仅供参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="AllSchool.js"></script>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
body{
background-color:aliceblue;
}
.wrapper{
width: 300px;
margin: 100px auto;
}
.wrapper ul .row{
margin-top:10px;
width: 100%;
height: 42px;
border-radius: 14px;
background-color: #fff;
line-height: 40px;
}
.wrapper ul .row span{
margin: 0 8px;
color: rgb(76, 154, 226);
}
.wrapper ul .row span::after {
content: "|";
color: #ccc;
margin-left: 13px;
}
.wrapper ul .row select{
width: 70%;
height: 30px;
border-radius: 5px;
border-color: aliceblue;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li class="row">
<span>省 会</span>
<select name="" id="province">
</select>
</li>
<li class="row">
<span>城 市</span>
<select name="" id="city"></select>
</li>
<li class="row">
<span>学 校</span>
<select name="" id="shcool"></select>
</li>
</ul>
</div>
</body>
</html>
<script>
/*
1: 创建option
2: 根据数据进行三级联动
创建初始值时，城市是默认省份对应所有城市(这里是北京市)
学校是相对应城市的学校
联动时，最重要的是找到关联的条件 用当前改变的值得value进行关联
*/
// 获取元素
function $(id){
return document.getElementById(id);
}
// 创建省份
var selectStr = '';// 省会的字符串
for(var i = 0;i < province.length; i ++)
{
selectStr += "<option value =" +province[i][0]+ ">" +province[i][1]+" </option>";
}
$('province').innerHTML = selectStr;
// 创建城市
var value = createCity(province[0][0]);// //createCity()函数的返回值
createSchool(value);
//创建学校
createSchool(value);
// 省级联动
$('province').onchange = function(){
var value = createCity(this.value);//createCity()函数的返回值
createSchool(value);
}
// 城市联动
$('city').onchange = function(){
createSchool(this.value);
}
// 创建城市函数
function createCity(value){
var cityNode = city[value];// 关联(初始值取第一个)
var select2Str = '';
for(var i = 0 ; i < cityNode.length; i++)
{
select2Str += "<option value="+ cityNode[i][0]+ ">" +cityNode[i][1]+"</option>"
}
$('city').innerHTML = select2Str;
return cityNode[0][0];
}
// 创建学校函数
function createSchool(value){
var shcoolNode = allschool[value];// 关联(初始值取第一个)
var select3Str = '';
for(var i = 0 ; i < shcoolNode.length; i++)
{
select3Str += "<option>" + shcoolNode[i][2] +"</option>"
}
$('shcool').innerHTML= select3Str;
};
</script>