数据处理：如何将数组生成具有层级结构的数据

一、需求描述

我有这样一组数据：

[
  {
    "id": "40b00a69ff82966169ad9f4757499a01",
    "status": "online",
    "prjinfo": {
      "projectname": "华山珑城泰物主机",
      "location": {
        "province": "山东省",
        "city": "济南市",
        "area": "历城区",
        "detail": "华山珑城",
        "longitude": "0.0",
        "latitude": "0.0"
      },
      "deviceCnt": 10
    }
  },
  {
    "id": "40b00a69ff82966169ad9f4757499a02",
    "status": "online",
    "prjinfo": {
      "projectname": "高新万达泰物主机",
      "location": {
        "province": "山东省",
        "city": "济南市",
        "area": "历下区",
        "detail": "高新万达",
        "longitude": "0.0",
        "latitude": "0.0"
      },
      "deviceCnt": 10
    }
  },
  {
    "id": "40b00a69ff82966169ad9f4757499a023",
    "status": "online",
    "prjinfo": {
      "projectname": "万达泰物主机",
      "location": {
        "province": "山东省",
        "city": "日照市",
        "area": "莒县",
        "detail": "万达",
        "longitude": "0.0",
        "latitude": "0.0"
      },
      "deviceCnt": 10
    }
  },
  {
    "id": "40b00a69ff82966169ad9f4757499a02",
    "status": "online",
    "prjinfo": {
      "projectname": "鲁商盛景泰物主机",
      "location": {
        "province": "山东省",
        "city": "济南市",
        "area": "历下区",
        "detail": "鲁商盛景广场",
        "longitude": "0.0",
        "latitude": "0.0"
      },
      "deviceCnt": 10
    }
  },
  {
    "id": "40b00a69ff82966169ad9f4757499a03",
    "status": "offline",
    "prjinfo": {
      "projectname": "颐和园泰物主机",
      "location": {
        "province": "北京市",
        "city": "北京市",
        "area": "西城区",
        "detail": "颐和园",
        "longitude": "0.0",
        "latitude": "0.0"
      },
      "deviceCnt": 10
    }
  }
]

需要将其根据 ​​省市县​​​的结构组织起来，并将数据应用到 ​​element-ui​​​ 的 ​​tree​​ 组件上。

二、实现

1. 原理

  1. 遍历数组，将其划分为基于省份的数据​​{山东省:[], 北京市:[]}​​ 。
  2. 再遍历省份内部的数据，划分为基于市的数据​​{济南市:[], 日照市:[]}​​。
  3. 再遍历市内部的数据，划分为基于区|县的数据​​{历下区:[], 历城区:[]}​​。
  4. 最后将这些数据组织起来。

2. 实现

// 基于省份的数组数据
// {山东省:[], 北京市:[]}
let provinceDataObject = {}
previewProvince.forEach(provinceInfo => {
    let currentProvince = provinceInfo.prjinfo.location.province
    // 如果存在当前省份的属性，就添加到当前省份属性数组中
    if (provinceDataObject.hasOwnProperty(currentProvince)){
        provinceDataObject[currentProvince].push(provinceInfo)
    } else {
    // 如果没有，就新建名为当前省份的属性，并将当前值添加到该数组中
        provinceDataObject[currentProvince] = [provinceInfo]
    }
})

// 其后的 市|县 跟省的处理方式一样，只不过要注意层级结构。
// 还是有点繁琐的，脑子内存不够容易找不到路了

for(let provinceName in provinceDataObject){
    let cityArray = provinceDataObject[provinceName]
    // 基于市的数组数据
    // {济南市:[], 日照市:[]}
    let cityDataObject = {}
    cityArray.forEach(cityInfo => {
        let currentCity = cityInfo.prjinfo.location.city
        if (cityDataObject.hasOwnProperty(currentCity)){
            cityDataObject[currentCity].push(cityInfo)
        } else {
            cityDataObject[currentCity] = [cityInfo]
        }
    })
    mainLocationDataObject[provinceName] = cityDataObject

    for(let cityName in cityDataObject){
        let areaArray = cityDataObject[cityName]
        // 基于市的数组数据
        // {历下区:[], 历城区:[]}
        let areaDataObject = {}
        areaArray.forEach(areaInfo => {
            let currentCity = areaInfo.prjinfo.location.area
            if (areaDataObject.hasOwnProperty(currentCity)){
                areaDataObject[currentCity].push(areaInfo)
            } else {
                areaDataObject[currentCity] = [areaInfo]
            }
        })
        mainLocationDataObject[provinceName][cityName] = areaDataObject
    }
}
console.log(mainLocationDataObject)

// 生成 el-tree 所用的数据
// PREVIEW TREE DATA
let previewTreeData = []
// 1.1 province level
for (let provinceName in mainLocationDataObject){
    let currentCityDataObject = {
        level: 'province',
        label: provinceName,
        id: provinceName
    }
    // 2.1 city level
    let cityTreeDataArray = []
    for (let cityName in mainLocationDataObject[provinceName]){
        let currentCityDataObject = {
            level: 'city',
            label: cityName,
            id: `${provinceName}-${cityName}`
        }
        // 3. area level
        let areaTreeDataArray = []
        for (let areaName in mainLocationDataObject[provinceName][cityName]){
            // 4. final data level
            let finalDataArray = mainLocationDataObject[provinceName][cityName][areaName].map(project => {
                return {
                    level: 'project',
                    label: project.prjinfo.projectname,
                    id: `${provinceName}-${cityName}-${areaName}-${project.prjinfo.projectname}`,
                }
            })

            areaTreeDataArray.push({
                level: 'area',
                label: areaName,
                id: `${provinceName}-${cityName}-${areaName}`,
                children: finalDataArray
            })
        }
        // 2.2
        currentCityDataObject.children = areaTreeDataArray
        cityTreeDataArray.push(currentCityDataObject)
    }
    // 1.2
    currentCityDataObject.children = cityTreeDataArray
    previewTreeData.push(currentCityDataObject)
}

console.log(previewTreeData)

三、结果：

生成的数据结构体

数据处理：如何将数组生成具有层级结构的数据_javascript


用在 ​​el-tree​​ 上的样子

数据处理：如何将数组生成具有层级结构的数据_javascript_02