最近在实习工做中遇到了一个须要问题:将后台返回的省市区 json 数据格式化以便前端渲染。这个问题真的是缠绕了我好几天,有思路可是思路特别模糊,今天终于解决了。
返回的数据格式以下:html
[ { "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
此外,在本地测试,经过jquery ajax 模拟获取数据并返回给全局使用,就是dataFormatterTypeId()函数所做的事情。ajax