json树状数据根据子节点递归寻找所有父节点的方法

最新推荐文章于 2024-06-27 17:48:35 发布

Jackey__sunshine

最新推荐文章于 2024-06-27 17:48:35 发布

阅读量9.8k

点赞数 2

分类专栏：前端 js 技术数据方法数据处理文章标签：数据方法 json数据子节点寻找所有父节点

技术同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

前端

20 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

前言：在项目中做级联选择的时候，很多前端UI框架往往返回的只有点击的最后一层数值，但是详情页面渲染的时候往往又需要将数据的层级全部显示出来。

解决方法：

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

<head>
    <meta charset="UTF-8">
    <title>json-query</title>
    <script type="text/javascript">
    var json = [{"value":"1","text":"中国","pid":"0","children":[{"value":"2","text":"山东省","pid":"1","children":[{"value":"3","text":"济南市","pid":"2","children":[{"value":"4","text":"历城区","pid":"3","children":[]},{"value":"5","text":"历下区","pid":"3","children":[]},{"value":"6","text":"高新区","pid":"3","children":[{"value":"fe8de48f20e54590bf60a83c4485a650","text":"南白花","pid":"6","children":[]},{"value":"4ac6d79609b5496f9296614ef4166ac7","text":"北白花","pid":"6","children":[]}]}]}]}]}]
    </script>

    <script type="text/javascript">
    /**
     * 递归查询JSON树 父子节点
     */
    var parentNode = null;
    var node = null;

    /**
     * 根据text查找当前节点以及父节点
     */
    function getNode(json, text) { 

        //1.第一层 root 深度遍历整个JSON
        for (var i = 0; i < json.length; i++) {
            if (node) {
                break;
            }
            var obj = json[i];
            //没有就下一个
            if (!obj || !obj.text) {
                continue;
            }

            //2.有节点就开始找，一直递归下去
            if (obj.text == text) {
                //找到了与text匹配的节点，结束递归
                node = obj;
                break;
            } else {
                //3.如果有子节点就开始找
                if (obj.children&&obj.children.length!=0) {
                    //4.递归前，记录当前节点，作为parent 父亲
                    parentNode = obj;
                    //递归往下找
                    getNode(obj.children, text);
                } else {
                    //跳出当前递归，返回上层递归
                    continue;
                }
            }
        }

        //5.如果木有找到父节点，置为null，因为没有父亲  
        if (!node) {
            parentNode = null;
        }

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

    //批量查询
    var query = '南白花';
    var result = [];
    var getResult = function(json,query){
        node = null;
        parentNode = null;
        var obj = getNode(json, query);
        //判断是否闭包
        if(obj.parentNode){
            //有父节点
            console.log("查询text:" + query + ", 结果:" + obj.node.text + " -> 父级:" + (obj.parentNode ? obj.parentNode.text : '木有父级!'));
            //获取父节点text继续查祖节点
            getResult(json,obj.parentNode.text);
            result.push(obj.parentNode.text);
        }
        return result;
    }
    getResult(json,query);
    //最后将查询push到result中
    result.push(query);
    console.log(result);//['中国','山东省','济南市','高新区','南白花']
    </script>
</head>

<body>
</body>

</html>