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":{
                    }
                }
            ]
        }
    ]

}
];

如何从这个json文件创建水平菜单？请帮我写这个json数据的javascript。我在这里创建了一个例子http://jsfiddle.net/s4DeS/

Answer 1

快速举例：http://jsfiddle.net/XecTZ/

        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":{
                            }
                        }
                    ]
                }
            ]
        }
        ];

        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>" + root_menu.MenuName + "</li>");
                if(root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) {
                    $("#menu").append("<li><ul 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>" + sub_menu.MenuName + "</li>");

/* e.t.c but DONT REPEAT YOURSELF */
/* but if there is 50 levels- what a u going to do? */
/* look at recursive way */

                        }
                    }
                    $("#menu").append("</li></ul>");
                }
            }
        }

如果你需要，你必须添加1,2,3级菜单，但最好练习（DRY）来编写递归函数。

Answer 2

迭代数据：

var a = data[0].menu;
for(var i = 0; i < a.length; i++){
    // Create menu components here
    var menuId = a[i].MenuId;
    // ...
}

Answer 3

我会说用这样的jquery试试吧。

var Data = // your json object .

var x = eval('('+Data+')');
$.each(x,function(entryIndex, entry){
 var menuId  = entry['menu']['menuId']; 
// and so on all the elements .
});

我不知道这是否适合你。但值得一试。

如何从json文件创建菜单

3 个答案: