1

我的任务是从 json 文件中执行水平菜单。通过这样做，我没有得到子子项。我的 json 文件是

var data = [{
    "menu":[
        {
            "MenuId":1,
            "MenuName":"Home",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":1,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":2,
            "MenuName":"New Transaction",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":2,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":3,
            "MenuName":"Portfolio",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":3,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":4,
            "MenuName":"Analytics",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":4,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":5,
            "MenuName":"Instructions",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":5,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":6,
            "MenuName":"Data Upload",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":6,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":7,
            "MenuName":"Administration",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":7,
            "ModuleId":null,
            "Menus":[
                {
                    "MenuId":8,
                    "MenuName":"Masters",
                    "MenuLink":null,
                    "Action":null,
                    "Controller":null,
                    "ParentID":7,
                    "SortOrder":1,
                    "ModuleId":null,
                    "Menus":[
                        {
                            "MenuId":10,
                            "MenuName":"Currency",
                            "MenuLink":"/Currencies/Index",
                            "Action":"Index",
                            "Controller":"Currencies",
                            "ParentID":8,
                            "SortOrder":1,
                            "ModuleId":null,
                            "Menus":{
                            }
                        },
                        {
                            "MenuId":11,
                            "MenuName":"Country",
                            "MenuLink":"/Countries/Index",
                            "Action":"Index",
                            "Controller":"Countries",
                            "ParentID":8,
                            "SortOrder":2,
                            "ModuleId":null,
                            "Menus":{
                            }
                        }
                    ]
                },
                {
                    "MenuId":9,
                    "MenuName":"User Management",
                    "MenuLink":null,
                    "Action":null,
                    "Controller":null,
                    "ParentID":7,
                    "SortOrder":2,
                    "ModuleId":null,
                    "Menus":{
                    }
                }
            ]
        }
    ]
}
];
$(function() {
for(var i = 0, j = data[0].menu.length; i<j; i++) {
    var root_menu = data[0].menu[i];
    if(root_menu.hasOwnProperty("MenuId")) {
        $("#menu").append('<li><a href="#" class="parent-menu">' + root_menu.MenuName + '</a></li>');
        if(root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) {
            $("#menu").append("<li><ul class='child-list' id='menu_" + root_menu.MenuId + "'>");
            for(var n = 0, m = root_menu.Menus.length; n<m; n++) {
                var sub_menu = root_menu.Menus[n];
                if(sub_menu.hasOwnProperty("MenuId")) {
                    $("#menu_" + root_menu.MenuId).append("<li class='nav-child'>" + sub_menu.MenuName + "</li>");
                }
            }
            $("#menu").append("</li></ul>");
        }
    }
}
});

如何使用此 json 文件获取子子项？您可以从http://jsfiddle.net/JcU4G/9/看到我的代码 在此管理菜单中有两个子菜单，该子菜单有另一个子菜单。在小提琴中，您可以看到子菜单位于主页下。但实际上我想要管理菜单下的子菜单，这些子菜单主包含另一个大子菜单。

4

2 回答 2

1

您可以通过data[0].menu但data变量不是 JSON 来获得它；它是一个数组。您需要去掉变量开头和结尾的方括号。

代替：

var data = [{
  menu: [
    {
       'Menu1'

你要：

var data = {
  menu: [
    {
       'Menu1'

现在data是一个对象。从那里，您的for循环将迭代对象中的键而不是计数。

for(var key in data.menu) {
    var root_menu = data.menu[key];

我已经更新了你的小提琴；希望这是您正在寻找的。

编辑：http: //jsfiddle.net/buUtB/1/

于 2013-02-27T06:47:15.887 回答
0

您可以使用递归函数。

我发布的代码不会创建菜单，它只是将每个菜单名称记录到控制台。但是，它确实演示了您需要如何迭代对象。您需要用代码替换日志代码以呈现您的菜单。

for (var i in data[0].menu) {
    logMenu(data[0].menu[i]);
}

function logMenu(menuNode) {
    console.log(menuNode.MenuName);
    for (var i in menuNode.Menus) {
        logMenu(menuNode.Menus[i]);
    }
}

请注意，该函数会为每个子菜单调用一次自身。

您可能需要传递一个“父”参数，以便知道每个子菜单项属于哪个菜单项。如果 'parent' 参数为空，那么您就知道要在页面上创建一个新的根菜单元素，而不是子菜单元素。

例如

for (var i in data[0].menu) {
    logMenu(data[0].menu[i], null);
}

function logMenu(menuNode, parent) {
    if (parent == null) {
        //Render root menu element in HTML
    } else {
        //Render sub menu element in HTML related to parent
    }
    for (var i in menuNode.Menus) {
        logMenu(menuNode.Menus[i], menuNode);
    }
}
于 2013-02-27T06:45:47.270 回答