最近在實習工作中遇到了一個需要問題:將后台返回的省市區 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()函數所作的事情。