javascript - 如何从 json 文件中获取子菜单

Question

我有一项任务是从 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/看到我的代码在此管理菜单中有两个子菜单，该子菜单有另一个子菜单。在 fiddle 中，您可以看到子菜单位于主页下。但实际上我想要 Administration 菜单下的那个子菜单，这些子菜单 master 包含另一个大子菜单。

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

我已经更新了你的 fiddle ；希望这就是你要找的。

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