2. 程式人生 > >JQuery遞迴解析無限層級JSON物件的所有key和value

JQuery遞迴解析無限層級JSON物件的所有key和value

阿新 • • 發佈：2019-01-16

前一段時間做了一個小專案，要加一個json資料自動繫結前臺表單的功能，類似於jquery-easyui裡面的資料繫結（給它一個json物件，就能自動解析裡面有的資料。json資料的key對於表單的name屬性，也可以是id或自己定義的標籤屬性，把key對應的值賦給對應名稱的表單）。百度了許多JSON解析，都是前提知道json結構的情況下的解析，毛線的一點用都沒有，最後看了一篇部落格，明白瞭解析key和值的原理，自己寫了一個簡單的coding（裡面的json資料從網上copy過來的，哈哈），廢話不多說，上程式碼：

<!DOCTYPE html>
    <head>
            <title
 
>遞迴解析無限層級JSON的所有key和value</title>
        <script src="jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div>
            <ul id="menu"></ul>
        </div>
        <script>
            var menulist = [{
                "menulist"
 
: [
                    { "MID": "M001", "MName": "首頁", "Url": "#", "menulist": "" },
                    { "MID": "M002", "MName": "車輛買賣", "Url": "#", "menulist":
                        [
                             { "MID": "M003", "MName": "新車", "Url": "#", "menulist":
                                [
                                    { "MID"
 
: "M006", "MName": "奧迪", "Url": "#", "menulist": "" },
                                    { "MID": "M007", "MName": "別克", "Url": "#", "menulist": "" }
                                ]
                             },
                             { "MID": "M004", "MName": "二手車", "Url": "#", "menulist": "" },
                             { "MID": "M005", "MName": "改裝車", "Url": "#", "menulist": "" }
                        ]
                    },
                    { "MID": "M006", "MName": "寵物", "Url": "#", "menulist": "" }
              ]
            }];

            $(function() {
                parseJson(menulist);
            });

            function parseJson(jsonObj) {
                if( typeof(jsonObj) == "undefined" ){
                    alert('JSON物件不能為空！');
                }
                //遍歷第一層資料
                for (var topKey in jsonObj) {
                    //如果物件型別為object型別且陣列長度大於0，遞迴繼續解析
                    if (jsonObj[topKey].length > 0 && typeof(jsonObj[topKey]) == "object") {
                        parseJson(jsonObj[topKey]);
                    } else {
                            //如果物件型別為object型別，依次迴圈取出所有元素
                            if (typeof(jsonObj[topKey]) == "object") {
                                for(var childKey in jsonObj[topKey]) {
                                    //如果物件型別為object型別，遞迴繼續解析
                                    if (typeof(jsonObj[topKey][childKey]) == "object") {
                                    parseJson(jsonObj[topKey][childKey]);
                                } else {
                                        //如果物件型別為object型別，直接取元素名稱和值
                                        $("#menu").append("<li>" + childKey + ":" + jsonObj[topKey][childKey] + "</li>");
                                }
                                }
                            } else{
                                    //如果物件型別為object型別，直接取元素名稱和值
                                    $("#menu").append("<li>" + childKey + ":" + jsonObj[topKey][childKey] + "</li>");
                            }
                    }
               }
            }
        </script>
    </body>
</html>

程式碼很簡單，只用了for迴圈、遞迴以及一些json的知識點，jquery用的熟練的很容易就能看懂（不明白的可以參考這篇部落格，地址），有什麼需要改進的或有什麼考慮不全的歡迎指出。

相關推薦

JQuery遞迴解析無限層級JSON物件的所有key和value

前一段時間做了一個小專案，要加一個json資料自動繫結前臺表單的功能，類似於jquery-easyui裡面的資料繫結（給它一個json物件，就能自動解析裡面有的資料。json資料的key對於表單的name屬性，也可以是id或自己定義的標籤屬性，把key對應的值賦

Jsoncpp未知Json獲取所有Key和Value

場景：要獲取某個Json資料，但不知道Json資料的key。如：{"item_key1":"item_value1","item_key2":"item_value2","item_key3":"item_value3"} 解決：關鍵是如何獲取到key，有了k

遞迴遍歷json裡的key和value

listJson(JSON.parseObject("jsonstr")); public void listJson(Object objJson) { if (objJson instanceof JSONArray) { JSONArray jsonArray = (

linux下 c語言遞迴遍歷資料夾下所有檔案和子資料夾(附上替換文字檔案內容的方法)

#include <stdio.h> #include <sys/dir.h> #include <string> #include <sys/stat.h> //判斷是否為資料夾 bool isDir(const cha

json物件相同key合併value值

var s = '{"身高":"175cm","性別":"男","興趣":"唱歌","興趣":"棒球","興趣":"游泳"}' var kv = {}, m, reg = /"[^"]+":"

遍歷物件的 key 和 value 值

// 遍歷物件的key值 var obj = { key1: 1, key2: 2, key3: 3 }; Object.keys(obj); // [ 'key1', 'key2', 'key3' ] // 遍歷物件的value值 var obj = { key1: 1, ke

鍵關聯資料庫資料與前臺所需無限層級json的相互遞迴轉換

測試json： 將層級json轉為資料庫儲存的平級鍵關聯資料 /** * 將層級json轉為資料庫儲存的平級鍵關聯資料 * @param {[type]} json [description] */ function JsonToSqlArr(jso

遞迴解析json物件（獲取某個key對應的value）

最近補充需求需要對json格式的資料進行處理，在網上搜尋了一些前輩們的心血，感覺不合適，就自己寫了一個， 廢話不說，直接上程式碼： package mlstudy.json; import java.io.FileInputStream; import java.io.

js遞迴遍歷樹形json結構 根據最後一個節點找到整個家族，根據父節點找到所有的子節點，根據層級關係寫成樹形結構

dataTree: [ { id: 1, address: "安徽", pid: 0 }, { id: 6, address: "安徽a", pid: 1 }, { id: 12, address: "安徽aa", pid: 6 },

js遞迴遍歷樹形json結構 根據最後一個節點找到整個家族，根據父節點找到所有的子節點，根據層級關係寫成樹形結構

dataTree: [ { id: 1, address: "安徽", pid: 0 }, { id: 6, address: "安徽a", pid: 1 }, { id: 12, address: "安徽aa", pid: 6

python遞迴解析JSON轉換為excel輸出

參考了此部落格的內容，在此基礎上在對資料進行處理： 程式碼如下： import json import pandas as pd def dict_generator(indict, pre=None): """ 把json遞迴的解析為k

JavaScript遞迴遍歷輸出json所有欄位與值的方法

宣告一個三層的json物件作為測試： var js={          "text":"MXCHIP won a prize",          "id": 1234,   &nbs

java:File類遞迴練習(按層級列印)

從鍵盤接收一個資料夾路徑,把資料夾中的所有檔案以及資料夾的名字按層級列印, 例如:     aaa是資料夾,裡面有bbb.txt,ccc.txt,ddd.txt這些檔案,有eee這樣的資料夾,eee中有fff.txt和ggg.txt,打印出層級來  &nb

12.scrapy框架之遞迴解析和post請求

今日概要 遞迴爬取解析多頁頁面資料 scrapy核心元件工作流程 scrapy的post請求傳送 今日詳情 1.遞迴爬取解析多頁頁面資料 - 需求：將糗事百科所有頁碼的作者和段子內容資料進行爬取切持久化儲存 - 需求分析：每一個頁面對應一個url，則scrapy工程需要對每一個頁碼

java呼叫http介面並解析返回的json物件

import java.io.BufferedReader; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.io.PrintWriter; import jav

php用遞迴實現無限極分類獲取樹形結構

 表中的資料如下： 遞迴的方法：  /** * 用遞迴獲取子類資訊 * $data 所有分類 * $parent_id 父級id * $level 層級 * $result 分好類的陣列 */ function getChild($data,$parent

DocumentBuilder 遞迴解析xml,適合android 以及java

package cn; import java.io.File; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import org.w

php遞迴實現無限級分類樹(最新版)（轉發自php中文網的大家講道理）

php遞迴實現無限級分類樹(最新版) 程式碼如下： /** * 將資料格式化成樹形結構 * @author Xuefen.Tong * @param array $items * @return array */ function gen

遞迴遍歷獲取複雜物件中所有目標屬性的值（二）

       在利用遞迴遍歷獲取Java複雜物件（物件的屬性仍是物件//list/map）中指定屬性的值（一）中我寫了遞迴遍歷複雜物件中目標屬性，找到第一個目標屬性則退出遍歷。現在有遇到要遍歷複雜物件中所有目標屬性的值。且指定了屬性所在類的類名、屬性型別、屬性

DNS遞迴解析和迭代解析的區別

11.3.7 DNS遞迴解析原理    “遞迴解析”（或叫“遞迴查詢”，其實意思是一樣的）是最常見，也是預設的解析方式。在這種解析方式中，如果客戶端配置的本地名稱伺服器不能解析的話，則後面的查詢全由本地名稱伺服器代替DNS客戶端進行查詢，直到本地名稱伺服器從權威名