最近在實習工做中遇到了一個須要問題:將後臺返回的省市區 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