处理省市级联数据

当后端给你一串这样的数据

const aArr = [
  {p: '广东省', c: '深圳市', c2: '宝安区', c3: '航程街道'},
  {p: '广东省', c: '深圳市', c2: '罗湖区'},
  {p: '广东省', c: '深圳市', c2: '福田区'},
  {p: '广东省', c: '深圳市', c2: '南山区'},
  {p: '广东省', c: '广州市', c2: '越秀区'},
  {p: '广东省', c: '广州市', c2: '天河区'},
  {p: '江西省', c: '南昌市', c2: '青山湖区'},
  {p: '江西省', c: '上饶市', c2: '共青城区'},
  {p: '江西省', c: '南昌市', c2: '新建区'},
]

如何把它处理成前端需要的数据呢？

解法：

function format1(cityList) {
  const mapObj = {}; // 存储历史数据
  const result = []; // 存储结果
  
  for (const item of cityList) { // 遍历数据
    const keysArr = Object.keys(item); // 拿到每项的键
    keysArr.forEach((keys, index) => {
      const isHasKeys = !mapObj[item[keys]]; // 为了避免覆盖已有的数据， 我们判断当前数据是否已在缓存中
      if (isHasKeys) {
      // 以’值‘为键 存储对应的键值对， children为下级市区
        mapObj[item[keys]] = { value: item[keys], label: item[keys], children: [] };
        if (index > 0) {
        // 下级市区记录上级省市，为了更快的找到对应的父级
          mapObj[item[keys]].parent = mapObj[item[keysArr[index - 1]]].value;
        }
        if (index === 0) {
            // 第一级直接插入到结果数组里面
            result.push(mapObj[item[keys]]);
        } else {
            // 找到父级，push 到父级 children 里面
            const parent =  mapObj[item[keys]].parent;
            mapObj[parent].children.push(mapObj[item[keys]]);
        }
      }
    })
  }
  // 返回结果
  return result;
}

运行结果：

[
    {
        "value": "广东省",
        "label": "广东省",
        "children": [
            {
                "value": "深圳市",
                "label": "深圳市",
                "children": [
                    {
                        "value": "宝安区",
                        "label": "宝安区",
                        "children": [
                            {
                                "value": "西乡街道",
                                "label": "西乡街道",
                                "children": [],
                                "parent": "宝安区"
                            }
                        ],
                        "parent": "深圳市"
                    },
                    {
                        "value": "罗湖区",
                        "label": "罗湖区",
                        "children": [],
                        "parent": "深圳市"
                    },
                    {
                        "value": "福田区",
                        "label": "福田区",
                        "children": [],
                        "parent": "深圳市"
                    },
                    {
                        "value": "南山区",
                        "label": "南山区",
                        "children": [],
                        "parent": "深圳市"
                    }
                ],
                "parent": "广东省"
            },
            {
                "value": "广州市",
                "label": "广州市",
                "children": [
                    {
                        "value": "越秀区",
                        "label": "越秀区",
                        "children": [],
                        "parent": "广州市"
                    },
                    {
                        "value": "天河区",
                        "label": "天河区",
                        "children": [],
                        "parent": "广州市"
                    }
                ],
                "parent": "广东省"
            }
        ]
    },
    {
        "value": "江西省",
        "label": "江西省",
        "children": [
            {
                "value": "南昌市",
                "label": "南昌市",
                "children": [
                    {
                        "value": "青山湖区",
                        "label": "青山湖区",
                        "children": [],
                        "parent": "南昌市"
                    },
                    {
                        "value": "新建区",
                        "label": "新建区",
                        "children": [],
                        "parent": "南昌市"
                    }
                ],
                "parent": "江西省"
            },
            {
                "value": "上饶市",
                "label": "上饶市",
                "children": [
                    {
                        "value": "共青城区",
                        "label": "共青城区",
                        "children": [],
                        "parent": "上饶市"
                    }
                ],
                "parent": "江西省"
            }
        ]
    }
]

轻松解决级联数据处理。 done