扁平数据改成树形结构js最佳方案

137 阅读1分钟

城市数据转换为树结构方法

image.png


const city = [
  {
    adcode: 100000,
    lng: 116.3683244,
    lat: 39.915085,
    name: "中华人民共和国",
    level: "country",
    parent: null
  },
  {
    adcode: 110000,
    lng: 116.405285,
    lat: 39.904989,
    name: "北京市",
    level: "province",
    parent: 100000
  },
  {
    adcode: 110101,
    lng: 116.418757,
    lat: 39.917544,
    name: "东城区",
    level: "district",
    parent: 110000
  },
  {
    adcode: 110102,
    lng: 116.366794,
    lat: 39.915309,
    name: "西城区",
    level: "district",
    parent: 110000
  },
  {
    adcode: 110105,
    lng: 116.486409,
    lat: 39.921489,
    name: "朝阳区",
    level: "district",
    parent: 110000
  },
  {
    adcode: 110106,
    lng: 116.286968,
    lat: 39.863642,
    name: "丰台区",
    level: "district",
    parent: 110000
  },
  {
    adcode: 110107,
    lng: 116.195445,
    lat: 39.914601,
    name: "石景山区",
    level: "district",
    parent: 110000
  },
  {
    adcode: 110108,
    lng: 116.310316,
    lat: 39.956074,
    name: "海淀区",
    level: "district",
    parent: 110000
  },
 ]
 // 转换为map架构, 便于查询, city._map[110108]可查询到
// {
//     adcode: 110108,
//     lng: 116.310316,
//     lat: 39.956074,
//     name: "海淀区",
//     level: "district",
//     parent: 110000
//   }

//lodash 的keyBy方法
function keyBy(data, key) {
    return data.reduce((result, item) => {
           result[item[key]] = item
           return result
    }, {})
}

 city._map = keyBy(city, "adcode")

//转换为树结构
 city._tree = city.filter(item => {
 // 如果是根节点过滤出去
  if (item.parent === null) return true
    
    // 找父节点
  let parent = city._map[item.parent]

  if (parent) {
      // 创建children添加子节点
    get(parent, "children", !parent.children && (parent.children = [])).push(item)
  }
})