处理相同值json数据...

50 阅读2分钟
// 数据源:
const json = [
    {
        wmstCode"MS0046102000000012",
        wmstLoc"陕西省铜川市耀州区桃曲坡水库",
        wmstName"桃曲坡水库-影像监测点-通道1",
        wmstUrl: "ws://119.3.238.155:10000/sms/3402000000202000000/XXXXX"
    }, {
        wmstCode"MS0046102000000012",
        wmstLoc"陕西省铜川市耀州区桃曲坡水库",
        wmstName"桃曲坡水库-影像监测点-通道2",
        wmstUrl: "ws://119.3.238.155:10000/sms/340200000020211111/XXXXX"
    }, {
        wmstCode"MS0046102000000013",
        wmstLoc"宝鸡市千阳县冯家山水库",
        wmstName"冯家山水库-影像监测点",
        wmstUrl: "ws://119.3.238.155:10000/sms/340200000020222222/XXXXX"
    }, {
        wmstCode"MS0046102000000014",
        wmstLoc"宝鸡市陇县曹家湾镇段家峡村段家峡水库",
        wmstName"段家峡水库-影像监测点",
        wmstUrl: "ws://119.3.238.155:10000/sms/3402000000202333333XXXXX"
    }, {
        wmstCode"MS0046102000000015",
        wmstLoc"宝鸡市陈仓区王家崖水库",
        wmstName"王家崖水库-影像监测点",
        wmstUrl: "ws://119.3.238.155:10000/sms/3402000000202444444XXXXX"
    }
]


// 处理 根据 wmstCode 查出通属性的数组,组成新的数据
let temp = {};
let result = [];
json.map((item, index) => {
    if(!temp[item.wmstCode]) {
        result.push({
            icon: "el-icon-s-home",
            wmstCode: item.wmstCode,
            label: item.wmstLoc,
            children: [{
                ...item,
                icon: "el-icon-video-camera",
                label: item.wmstName,
            }]
        })
        temp[item.wmstCode] = true;
    } else {
        let index = result.findIndex(v => v.wmstCode == item.wmstCode);
        if(index != -1) {
            result[index].children.push({
                ...item,
                icon: "el-icon-video-camera",
                label: item.wmstName,
            });
        }
    }
})


// 打印 console.log(result);
[
     {
        icon: "el-icon-s-home",
        wmstCode"MS0046102000000012",
        label"陕西省铜川市耀州区桃曲坡水库",
        children: [
            {
                icon: "el-icon-video-camera",
                wmstCode"MS0046102000000012",
                wmstLoc"陕西省铜川市耀州区桃曲坡水库",
                label"桃曲坡水库-影像监测点-通道1",
                wmstUrl: "ws://119.3.238.155:10000/sms/3402000000202000000/XXXXX"
            }, {
                icon: "el-icon-video-camera",
                wmstCode"MS0046102000000012",
                wmstLoc"陕西省铜川市耀州区桃曲坡水库",
                label"桃曲坡水库-影像监测点-通道2",
                wmstUrl: "ws://119.3.238.155:10000/sms/340200000020211111/XXXXX"
            }
        ]
    }, {
        icon: "el-icon-s-home",
        wmstCode"MS0046102000000013",
        label"宝鸡市千阳县冯家山水库",
        children: [
            {
                icon: "el-icon-video-camera",
                wmstCode"MS0046102000000013",
                wmstLoc"宝鸡市千阳县冯家山水库",
                label"冯家山水库-影像监测点",
                wmstUrl: "ws://119.3.238.155:10000/sms/340200000020222222/XXXXX"
            }
       ]
    }, {
        icon: "el-icon-s-home",
        wmstCode"MS0046102000000014",
        label"宝鸡市陇县曹家湾镇段家峡村段家峡水库",
        children: [
            {
                icon: "el-icon-video-camera",
                wmstCode"MS0046102000000014",
                wmstLoc"宝鸡市陇县曹家湾镇段家峡村段家峡水库",
                label"段家峡水库-影像监测点",
                wmstUrl: "ws://119.3.238.155:10000/sms/3402000000202333333XXXXX"
            }
       ]
    }, {
        icon: "el-icon-s-home",
        wmstCode"MS0046102000000015",
        label"宝鸡市陈仓区王家崖水库",
        children: [
            {
                icon: "el-icon-video-camera",
                wmstCode"MS0046102000000015",
                wmstLoc"宝鸡市陈仓区王家崖水库",
                label"王家崖水库-影像监测点",
                wmstUrl: "ws://119.3.238.155:10000/sms/3402000000202444444XXXXX"
            }
       ]
    }
]