首页 > 代码库 > js遍历json

js遍历json

2024-09-16 12:54:44   214人阅读

<HTML>
<HEAD>
<!--  meta 解释 :  http://www.haorooms.com/post/html_meta_ds -->
<meta http-equiv="content-Type"content="text/html;charset=utf-8">
<TITLE></TITLE>
<style>
    
</style>

<script type="text/javascript"    src="D:/Old PC/D/html/jQuery/jquery-3.1.0.js" ></script>


<script type="text/javascript">
    <!--json  Data-->
var menulist = {
            "name":"bobo",
             "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": "" }
           ]
         };


<!--js  Code-->
 $(function () {
             $("#btn_bianli").click(function () {
                 var showlist = $("<ul></ul>");
                 showall(menulist.menulist, showlist);
                 $("#div_menu").append(showlist);
             });
         });
 
         //menu_list为json数据
         //parent为要组合成html的容器
         function showall(menu_list, parent) {
             for (var menu in menu_list) {
                 //如果有子节点，则遍历该子节点
                 if (menu_list[menu].menulist.length > 0) {
                     //创建一个子节点li
                     var li = $("<li></li>");
                     //将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中
                     $(li).append(menu_list[menu].MName).append("<ul></ul>").appendTo(parent);
                     //将空白的ul作为下一个递归遍历的父亲节点传入
                     showall(menu_list[menu].menulist, $(li).children().eq(0));
                 }
                 //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中
                 else {
                    $("<li></li>").append(menu_list[menu].MName).appendTo(parent);
                 }
             }
         }

</script>
</HEAD>
<BODY>
<button id ="btn_bianli" >#btn_bianli</button>
<div id = "div_menu" class="tree well">

</div>

</BODY>
</HTML>

 

js遍历json


联系
我们