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

[ailo555]

数据源：
[
{
"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"
}
]


最终目标：

[二月十六]

最终啥效果？

[ailo555]

最终目标：

这是有等级的，一级二级三级等

[ailo555]

引用 3 楼 u012418098 的回复:

循环数组生成菜单就可以了

<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(""));

这个没有等级啊，返回的数据是有等级的

[ailo555]

引用 1 楼 sinat_28984567 的回复:

最终啥效果？

最终效果如下4楼：是有等级递归的

[jio可]

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

[木头海上漂]

for(item in data) {}

[jio可]

循环数组生成菜单就可以了

<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(""));

[redlz2500]

数据格式不行，要么是数据格式修改为层级结构的，然后按层级依次循环添加 要么数据格式中带有该元素的级别以及上一级菜单 你这格式没法做

[qq_32350863]

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> ]

[qq_32350863]

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

[qq_32350863]

[sxlr918]

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

[一无用处的菜鸟]

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