(轉載)JavaScript遞歸查詢 json 樹父子節點

時間 2019-12-02

標籤轉載 javascript 遞歸查詢 json 父子節點欄目 JavaScript 简体版

原文原文鏈接

在Json中知道某個屬性名，想要肯定該屬性在Json樹具體的節點，而後進行操做仍是很麻煩的javascript

能夠用如下方法找到該屬性所在的節點，和父節點html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>json-query</title>
    <script type="text/javascript">
    var json = [{
        "MenuCode": "S0-3100-00",
        "MenuAction": "TelPay",
        "MenuName": "通信費",
        "subMenu": [{
            "MenuCode": "S0-3100-01",
            "MenuAction": "ChinaMobileTelBalQryInitAct",
            "MenuName": "中國移動"
        }, {
            "MenuCode": "S0-3100-02",
            "MenuAction": "UnicomTelBalQryInitAct",
            "MenuName": "中國聯通"
        }, {
            "MenuCode": "S0-3100-03",
            "MenuAction": "TelecomTelBalQryInitAct",
            "MenuName": "中國電信"
        }]
    }, {
        "MenuCode": "S0-3200-00",
        "MenuAction": "PowerPayInitAct",
        "MenuName": "電費",
        "subMenu": [{
            "MenuCode": "S0-3210-00",
            "MenuAction": "SmartPowerCardInitAct",
            "MenuName": "智能電能表充值",
            "subMenu": [{
                "MenuCode": "S0-3210-01",
                "MenuAction": "SmartPowerCardPayInitAct",
                "MenuName": "購電卡充值"
            }, {
                "MenuCode": "S0-3210-02",
                "MenuAction": "SmartPowerCardQueryInitAct",
                "MenuName": "購電卡查詢"
            }, {
                "MenuCode": "S0-3210-03",
                "MenuAction": "SmartPowerCardRewriteInitAct",
                "MenuName": "購電卡補寫"
            }]
        }, {
            "MenuCode": "S0-3220-00",
            "MenuAction": "ElectricChargeInitAct",
            "MenuName": "電能表無卡充值",
            "subMenu": [{
                "MenuCode": "S0-3220-01",
                "MenuAction": "ElectricChargeQryInitAct",
                "MenuName": "購電充值"
            }, {
                "MenuCode": "S0-3220-02",
                "MenuAction": "ElectricChargeMsgRegInitAct",
                "MenuName": "短信訂閱"
            }]
        }]
    }, {
        "MenuCode": "S0-3300-00",
        "MenuAction": "HeatingPayInitAct",
        "MenuName": "取暖費",
        "subMenu": [{
            "MenuCode": "S0-3300-04",
            "MenuAction": "JinNengHeatingQryInitAct",
            "MenuName": "天津能源繳費"
        }]
    }, {
        "MenuCode": "S0-3400-00",
        "MenuAction": "CablePayInitAct",
        "MenuName": "有線電視費",
        "subMenu": [{
            "MenuCode": "S0-3400-01",
            "MenuAction": "GuangDianCableQryInitAct",
            "MenuName": "廣電有線繳費"
        }, {
            "MenuCode": "S0-3400-02",
            "MenuAction": "TedaCableQryInitAct",
            "MenuName": "泰達有線繳費"
        }]
    }, {
        "MenuCode": "S0-3000-01",
        "MenuAction": "ETCLoadInitAct",
        "MenuName": "ETC卡充值"
    }, {
        "MenuCode": "S0-3500-00",
        "MenuAction": "WaterPayInitAct",
        "MenuName": "水費",
        "subMenu": [{
            "MenuCode": "S0-3500-01",
            "MenuAction": "JinNanWaterQryInitAct",
            "MenuName": "津南水費繳費"
        }]
    }, {
        "MenuCode": "S0-3000-03",
        "MenuAction": "GasPayInitAct",
        "MenuName": "燃氣費"
    }, {
        "MenuCode": "S0-3000-04",
        "MenuAction": "CommonPayInitAct",
        "MenuName": "通用繳費"
    }, {
        "MenuCode": "S0-3600-00",
        "MenuAction": "CityCardInitAct",
        "MenuName": "城市一卡通充值",
        "subMenu": [{
            "MenuCode": "S0-3600-01",
            "MenuAction": "CityCardPayInitAct",
            "MenuName": "城市卡充值"
        }, {
            "MenuCode": "S0-3600-02",
            "MenuAction": "CityCardRewriteInitAct",
            "MenuName": "城市卡補寫卡"
        }]
    }, {
        "MenuCode": "S0-3000-05",
        "MenuAction": "SocialSecurityQryInitAct",
        "MenuName": "社保繳費"
    }]; 
    </script>

    <script type="text/javascript">
    /*
     * 遞歸查詢JSON樹 父子節點
     */
    var parentNode = null;
    var node = null;

    /**
     * 根據NodeID查找當前節點以及父節點
     * 
     * @param  {[type]}
     * @param  {[type]}
     * @return {[type]}
     */
    function getNode(json, nodeId) { 

        //1.第一層 root 深度遍歷整個JSON
        for (var i = 0; i < json.length; i++) {
            if (node) {
                break;
            }
            var obj = json[i];
            //沒有就下一個
            if (!obj || !obj.MenuCode) {
                continue;
            }

            //2.有節點就開始找，一直遞歸下去
            if (obj.MenuCode == nodeId) {
                //找到了與nodeId匹配的節點，結束遞歸
                node = obj;
                break;
            } else {
                //3.若是有子節點就開始找
                if (obj.subMenu) {
                    //4.遞歸前，記錄當前節點，做爲parent 父親
                    parentNode = obj;
                    //遞歸往下找
                    getNode(obj.subMenu, nodeId);
                } else {
                    //跳出當前遞歸，返回上層遞歸
                    continue;
                }
            }
        }

        //5.若是木有找到父節點，置爲null，由於沒有父親  
        if (!node) {
            parentNode = null;
        }

        //6.返回結果obj
        return {
            parentNode: parentNode,
            node: node
        };
    }

    //批量查詢
    var query = [
        'S0-3400-00', 'S0-3100-03', 'S0-3210-02', 'S0-3210-03', 'S0-3000-05', 'S0-3300-04'
    ];

    //打印結果
    for (var i = 0; i < query.length; i++) {
        node = null;
        parentNode = null;
        var obj = getNode(json, query[i]);
        console.log("查詢nodeId:" + query[i] + ", 結果:" + obj.node.MenuCode + ",name:" + obj.node.MenuName + " -> 父級:" + (obj.parentNode ? obj.parentNode.MenuName : '木有父級!'));
    }
    </script>
</head>

<body>
</body>

</html>