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/看到我的代码。在这个管理菜单中有两个子菜单，子菜单有另一个子菜单。在小提琴中，您可以看到子菜单位于Home下。但实际上我想要管理菜单下的子菜单，这些子菜单主菜单包含另一个宏子菜单。

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

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

修改：http://jsfiddle.net/buUtB/1/

Answer 2

您可以使用递归函数。

我发布的代码没有创建菜单，它只是在控制台上记录每个菜单名称。但它确实演示了如何遍历对象。您需要使用代码替换日志代码以呈现菜单。

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'参数，以便知道每个子菜单项属于哪个菜单项。如果'parent'参数为null，那么您就知道在页面上创建一个新的根菜单元素，而不是子菜单元素。

E.g。

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);
    }
}

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

2 个答案: