今天小颖在工作中遇到要遍历树得问题了，实现后，怕后期遇到又忘记啦，所以记录下嘻嘻，其实这个和小颖之前写过得一篇文章    json的那些事    中第4点有关json的面试题有些类似。

数组格式：

    var arry = [{

            "id": "11",

            "name": "huanhuan",

            "pid": "0",

            "isleaf": 2,

            "child": [{

                    "name": "豆豆",

                    "pid": "22",

                    "id": "222",

                    "isleaf": 1

                },

                {

                    "name": "huanhuanhuan",

                    "pid": "2323",

                    "id": "2324",

                    "isleaf": 1

                }

            ]

        },

        {

            "id": "1212",

            "name": "大大",

            "pid": "0",

            "isleaf": 2,

            "child": [{

                "name": "1234",

                "pid": "1313",

                "id": "4444",

                "isleaf": 1

            }]

        },

        {

            "id": "666",

            "name": "光头强爱上熊二",

            "pid": "0",

            "isleaf": 1,

            "child": null

        },

        {

            "id": "888",

            "name": "服务范围2",

            "pid": "0",

            "isleaf": 2,

            "child": [{

                "name": "范围",

                "pid": "999",

                "id": "111111",

                "isleaf": 1

            }]

        },

        {

            "id": "121324",

            "name": "抚慰抚慰",

            "pid": "0",

            "isleaf": 1,

            "child": null

        },

        {

            "id": "1",

            "name": "12345",

            "pid": "0",

            "isleaf": 2,

            "child": [{

                "name": "大道东侧1",

                "pid": "1",

                "id": "3",

                "isleaf": 1

            }]

        },

        {

            "id": "2",

            "name": "顶顶顶顶",

            "pid": "0",

            "isleaf": 2,

            "child": [{

                "name": "顶顶顶顶顶",

                "pid": "2",

                "id": "4",

                "isleaf": 2,

                "child": [{

                    "name": "顶顶顶顶顶顶-1",

                    "pid": "4",

                    "id": "5",

                    "isleaf": 1

                }]

            }]

        }

    ]

最终渲染结果：

aaarticlea/png;base64,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" alt="" />

具体实现：

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <div class="dd"></div>

</body>

    <script type="text/javascript">

    var arry = [{

            "id": "11",

            "name": "huanhuan",

            "pid": "0",

            "isleaf": 2,

            "child": [{

                    "name": "豆豆",

                    "pid": "22",

                    "id": "222",

                    "isleaf": 1

                },

                {

                    "name": "huanhuanhuan",

                    "pid": "2323",

                    "id": "2324",

                    "isleaf": 1

                }

            ]

        },

        {

            "id": "1212",

            "name": "大大",

            "pid": "0",

            "isleaf": 2,

            "child": [{

                "name": "1234",

                "pid": "1313",

                "id": "4444",

                "isleaf": 1

            }]

        },

        {

            "id": "666",

            "name": "光头强爱上熊二",

            "pid": "0",

            "isleaf": 1,

            "child": null

        },

        {

            "id": "888",

            "name": "服务范围2",

            "pid": "0",

            "isleaf": 2,

            "child": [{

                "name": "范围",

                "pid": "999",

                "id": "111111",

                "isleaf": 1

            }]

        },

        {

            "id": "121324",

            "name": "抚慰抚慰",

            "pid": "0",

            "isleaf": 1,

            "child": null

        },

        {

            "id": "1",

            "name": "12345",

            "pid": "0",

            "isleaf": 2,

            "child": [{

                "name": "大道东侧1",

                "pid": "1",

                "id": "3",

                "isleaf": 1

            }]

        },

        {

            "id": "2",

            "name": "顶顶顶顶",

            "pid": "0",

            "isleaf": 2,

            "child": [{

                "name": "顶顶顶顶顶",

                "pid": "2",

                "id": "4",

                "isleaf": 2,

                "child": [{

                    "name": "顶顶顶顶顶顶-1",

                    "pid": "4",

                    "id": "5",

                    "isleaf": 1

                }]

            }]

        }

    ]

    var html = "";

    function orgTreeFun(data) {

        html += "<ul>";

        if (data.length > 0) {

            for (var i = 0; i < data.length; i++) {

                if (data[i].child) {

                    html += "<li id=" + data[i].id + ">" + data[i].name;

                    orgTreeFun(data[i].child);

                    html += "</li>";

                } else {

                    html += "<li id=" + data[i].id + ">" + data[i].name + "</li>";

                }

            }

            html += '</ul>';

        }

    }

    orgTreeFun(arry);

    document.getElementsByClassName('dd')[0].innerHTML=html;

    </script>

</html>

数据格式:

var menuArry = [

            { id: 1, name: "办公管理", pid: 0 },

            { id: 2, name: "请假申请", pid: 1 },

            { id: 3, name: "出差申请", pid: 1 },

            { id: 4, name: "请假记录", pid: 2 },

            { id: 5, name: "系统设置", pid: 0 },

            { id: 6, name: "权限管理", pid: 5 },

            { id: 7, name: "用户角色", pid: 6 },

            { id: 8, name: "菜单设置", pid: 6 },

        ];

渲染结果：

aaarticlea/png;base64,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" alt="" />

具体实现：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

</head>

<body>

    <script type="text/javascript">

    $(function() {

        var menuArry = [

            { id: 1, name: "办公管理", pid: 0 },

            { id: 2, name: "请假申请", pid: 1 },

            { id: 3, name: "出差申请", pid: 1 },

            { id: 4, name: "请假记录", pid: 2 },

            { id: 5, name: "系统设置", pid: 0 },

            { id: 6, name: "权限管理", pid: 5 },

            { id: 7, name: "用户角色", pid: 6 },

            { id: 8, name: "菜单设置", pid: 6 },

        ];

        GetData(0, menuArry)

        $("body").append(menus);

    });

    //菜单列表html

    var menus = '';

    //根据菜单主键id生成菜单列表html

    //id：菜单主键id

    //arry：菜单数组信息

    function GetData(id, arry) {

        var childArry = GetParentArry(id, arry);

        console.log(childArry);

        if (childArry.length > 0) {

            menus += '<ul>';

            for (var i in childArry) {

                menus += '<li>' + childArry[i].name;

                GetData(childArry[i].id, arry);

                menus += '</li>';

            }

            menus += '</ul>';

        }

    }

    //根据菜单主键id获取下级菜单

    //id：菜单主键id

    //arry：菜单数组信息

    function GetParentArry(id, arry) {

        var newArry = new Array();

        for (var i in arry) {

            if (arry[i].pid == id)

                newArry.push(arry[i]);

        }

        return newArry;

    }

    </script>

</body>

</html>

遍历json数组实现树的更多相关文章

  1. jquery $.each遍历json数组方法

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/ ...

  2. JQuery遍历json数组的3种方法

    这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 一.使用each遍历 $(functio ...

  3. 如何利用JavaScript遍历JSON数组

    1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. $.each遍历json数组

    1.遍历单层json数组 我们把idx和obj都打印出来看看,到底是什么东西 var json1 =[{"id":"1","tagName" ...

  5. jquery $.each()遍历json数组

    使用jQuery的$.each()方法来遍历一个数组对象 var json=[ {"id":"1","tagName":"appl ...

  6. Json格式循环遍历,Json数组循环遍历

    Json格式数据如何遍历,这里我们可以用for..in实现 例如最简单的json格式 , 'handsome' : 'yes' }; for( var key in json1 ){ console. ...

  7. jquery遍历获取带checkbox表格的选中值以及遍历json数组

    今天整理了一下jquery遍历的两个用法,分享给大家. 1.$().each 主要用来遍历DOM元素,获取DOM的值或样式等. 2.$.each() 主要用来遍历后台ajax返回的json数组,循环将 ...

  8. 【转】 jquery遍历json数组方法

    $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...

  9. jQuery遍历Json数组

    var jsonArray=  [{ "name": "张三", "password": "123456"},{ &qu ...

随机推荐

  1. MATLAB：读取mat文件中物体的三维坐标，显示三维模型

    在MATLAB中建立一个脚本show3Dmat.m文件,编写代码: clc; clear; %%read 3D data load('E:\博士\深度学习与三维重建\代码实现\3DRecGAN\X_Y ...

  2. memcached能获取所有的key吗

    memcached能获取所有的key吗 Memcache 查看列出所有key方法 Memcached中获取所有的key 特别要注意:memcached保存的值需要序列化,否则是无法保存的,而且是不会报 ...

  3. 搭建交叉调试环境 arm-linux-gdb配合gdbserver

        在嵌入式开发中,有时候需要进行源码级别的调试,可以设置断点,单步执行,相比于每步打印printf或者printk来说,更加友好.下面就来介绍这种调试方法.     gdb交叉调试类似于网络浏览 ...

  4. JavaScript 使用穷举方式实现内容简繁转换

    场景: 在Web开发中,有时存在对内容进行简体和繁体互相转换的需求,这时我们可以参考以下做法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...

  5. [转] Linux常用命令大全（非常全！！！）

    出处:https://www.cnblogs.com/yjd_hycf_space/p/7730690.html Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得 ...

  6. 通过MyEclipse部署web应用程序开发环境

    1.下载并安装MyEclipse10 2.配置java开发的jar包 3.配置tomcat服务器 4.部署tomcat服务器 点击Bronse可以查看部署后的文件夹目录 5.启动tomcat服务器 6 ...

  7. MySQL修改密码和忘记ROOT密码

    1.关闭数据库 脚本:[root@mysql etc]# service mysql stop 2.使用脚本: mysqld_safe --skip-grant-tables 启动数据库 使用/usr ...

  8. eclipse中开发js会卡，去掉.project中的validate即可

    注释掉 <buildCommand> <name>org.eclipse.ui.externaltools.ExternalToolBuilder</name> & ...

  9. less语法（一）变量与extend

    摘要: 作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法.这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS.less文件是 ...

  10. Oauth2.0（五）：Authorization Code 授权

    Authorization Code 方式适用于有自己的服务器的应用.之所以叫这个名字,是因为流程中引入了一个叫做 authorization code 的东西.这个东西是一个一次性的临时凭证,用来换 ...