记录一次JSON数据处理(省市区数据)

最近在实习工作中遇到了一个需要问题:将后台返回的省市区 json 数据格式化以便前端渲染。这个问题真的是缠绕了我好几天,有思路但是思路特别模糊,今天终于解决了。
返回的数据格式如下:

[
  {
    "children": [
      {
        "children": [
          "东城区",
          "西城区",
          ...
        ],
        "name": "北京市"
      }
    ],
    "name": "北京市"
  },
  {
    "children": [
      {
        "children": [
          "西湖区",
          "余杭区",
           ...
        ],
        "name": "杭州市"
      }
    ],
    "name": "浙江省"
  },...]

我只需要第一级和第二级的 name 数据值,可以使用递归函数来查找,具体看下面的代码:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>

// 使用ajax获取数据
function dataFormatterTypeId() {
    let json
    $.ajax({
        url:"administrative-divisions.json",
        type:"get",
        dataType:"json",
        async: false,
        success:function(result){
          //  console.log(result)
           json = result
        }
    })
    return json
}

let res = dataFormatterTypeId()
// console.log(res)

// 核心代码----------------递归实现
function getJson (json) {
  for (let i = 0; i < json.length; i++) {
    if (json[i].children && typeof json[i].children[0] === "object") {
      this.getJson(json[i].children)
    } else {
      json[i].children = undefined
    }
  }
  return json
}
console.log(this.getJson(res))

这里主要的思路是用递归函数实现:使用递归函数设置最后一级 children 的值为undefined 然后返回数据即可。
然而,主要的问题是 终止递归的时机在哪里?我也知道可以通过判断 children 里面的数据部位 Object 类型的时候就可以终止递归,但是,我把最关键的代码写成了 typeof json[i].children[0] === Object,...
好吧,最基础的知识点:typeof 的取值有 "number"、"string"、"boolean"、"object"、"function" 和 "undefined",注意是字符串
而今天可能脑子比较清醒,突然想到使用typeof打印以下结果是啥,结果就解决了。

此外,在本地测试,通过jquery ajax 模拟获取数据并返回给全局使用,就是dataFormatterTypeId()函数所作的事情。

posted @ 2020-07-19 00:00  公瑾当年  阅读(1194)  评论(0编辑  收藏  举报