jquery如何将json数据遍历成菜单？

Question

数据源：
[
    {
        "object_id": "1",
        "object_pid": "-1",
        "object_name": "权限",
        "object_url": "11",
        "role_id": "2"
    },
    {
        "object_id": "2",
        "object_pid": "1",
        "object_name": "角色管理",
        "object_url": "22",
        "role_id": "2"
    },
    {
        "object_id": "5",
        "object_pid": "2",
        "object_name": "33",
        "object_url": "3",
        "role_id": "2"
    },
    {
        "object_id": "6",
        "object_pid": "2",
        "object_name": "轴承",
        "object_url": "55",
        "role_id": "2"
    },
    {
        "object_id": "7",
        "object_pid": "2",
        "object_name": "轴承座类",
        "object_url": "55",
        "role_id": "2"
    },
    {
        "object_id": "11",
        "object_pid": "2",
        "object_name": "6",
        "object_url": "6",
        "role_id": "2"
    },
    {
        "object_id": "3",
        "object_pid": "1",
        "object_name": "用户管理",
        "object_url": "33·",
        "role_id": "2"
    },
    {
        "object_id": "8",
        "object_pid": "3",
        "object_name": "优化",
        "object_url": "99",
        "role_id": "2"
    },
    {
        "object_id": "9",
        "object_pid": "3",
        "object_name": "评价",
        "object_url": "99",
        "role_id": "2"
    },
    {
        "object_id": "4",
        "object_pid": "1",
        "object_name": "系统管理",
        "object_url": "44",
        "role_id": "2"
    },
    {
        "object_id": "10",
        "object_pid": "1",
        "object_name": "55",
        "object_url": "55",
        "role_id": "2"
    }
]
最终目标：

Answer 1

for(item in data) {}

Answer 2

循环数组生成菜单就可以了
 
<ul id="menu"></ul>
  
 
  var data = [{name:"菜单一"},{name:"菜单一A"},{name:"菜单一B"},{name:"菜单一C"}],liArray = [];
  data.forEach(function(item){
      liArray.push("<li>"+item.name+"</li>");
  });
  $("#menu").html(liArray.join(""));

Answer 3

有多级最好是改变一下数据格式，把子节点放在属性children里面方便生成层级菜单。

Answer 4

angular.js的,还有一种就是写在js的，第一个字符串[code=javascript][/
ajax的
 <li id="manage" class="module_list"></li>
$.ajax({
                // async : false,
                type : 'get',
                dataType : 'json',
                url : 'json/menu.json',
                success : function (data) {
                    var iString='';
                    for(var i=0;i<data.title.length;i++){
                        if(i==0){
                            iString= '<div class="basic_info f_l">';   
                        }else if(i==1){
                            iString= '<div class="file_manage f_l">';
                        }else if(i==2){
                            iString= '<div class="dynamic_info f_l">';
                        }else if(i==3){
                            iString= '<div class="integral_info f_l">';
                        }
                        iString+= '<h1><i class="f_l"></i><span>'+data.title[i].name+'</span></h1>'+
                                      '<dl>'; 
                        for(var j=0; j < data.title[i].basic.length;j++){
                         
                        iString+='<dd>'+
                                    '<a href="javascript:Open(\''+data.title[i].basic[j].name+'\',\''+data.title[i].basic[j].url+'\')" name="tab1" >'+data.title[i].basic[j].name +'</a>'+
                                '</dd>';
                        }
                        iString+='</dl></div>';
                        $('#manage').append(iString);
                    }
                }
            });
]
[code=javascript][/
<li class="module_list">
                    <div ng-class="{{$index}} == 0 ? 'basic_info f_l' : ({{$index}} == 1 ? 'file_manage f_l' : ({{$index}} ==2 ? 'dynamic_info f_l' : 'integral_info f_l'))" ng-repeat="x in menu">
                        <h1><i class="f_l"></i><span>{{x.name}}</span></h1>                
                        <dl ng-repeat="y in x.basic track by $index">
                            <dd>
                                <a href="javascript:void(0)" ng-click="Open(menu[$parent.$index].basic[$index].name,menu[$parent.$index].basic[$index].url)" name="tab1" >{{menu[$parent.$index].basic[$index].name}}</a>
                            </dd>
                        </dl>
                    </div>
                </li>
<script type="text/javascript">
            var app = angular.module('myApp', []);
            app.controller('siteCtrl', function($scope, $http) {
                $http.get("json/menu.json")
                .success(function (data) {
                    $scope.menu = data;
                    $scope.Open = function Open(text, url) {                        if(url!=''){
                            if ($("#tabs").tabs('exists', text)) {
                                $("#tabs").tabs('select', text);
                            }else {
                                $("#tabs").tabs('add', {
                                 title : text,
                                 closable : true,
                                 content: "<iframe width='100%' height='100%' frameborder='0' src="+url+" style='width:100%;height:100%;'></iframe>"
                                });
                            }                            $('li.module_list').stop(false,true).fadeOut(300);
                            $('#content').stop(false,true).animate({
                                top : 80+"px"
                            });
                        }else{
                            return ;
                        }
                    }                });
            });            // function height(){
            //     alert(0)
            // }
            // height();
            // $(window).resize(function(){
            //     height();
            // })
        </script>
]

Answer 5

有点乱，你自己看看，agualer和ajax的那个差不多的，都是异步拿数据

Answer 6

纯属进来学习的，也许以后能用到这种jquery的json数据问题

Answer 7

使用Ztree比较快，全都是工具封装起来，刚刚实现了7级菜单