Fatal编程技术网
  • javascript/
  • Javascript 如何从json文件创建菜单

Javascript 如何从json文件创建菜单

javascript jquery html css json

Javascript 如何从json文件创建菜单,javascript,jquery,html,css,json,Javascript,Jquery,Html,Css,Json,我的任务是从json对象创建一个水平菜单 var data = [ { "menu":[ { "MenuId":1, "MenuName":"Home", "MenuLink":null, "Action":null, "Controller":null, "ParentID":null, "SortOr

我的任务是从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。我在这里创建了一个示例

遍历数据：

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

var a=data[0]。菜单；
对于（变量i=0；i
我想说，像这样用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 .
});
我不知道这对你是否有用。但值得一试。

举个简单的例子：

var数据=[{
“菜单”：[
{
“MenuId”：1，
“Menuame”：“家”，
“MenuLink”：空，
“动作”：空，
“控制器”：空，
“ParentID”：空，
“巫师”：1，
“ModuleId”：空，
“菜单”：{
}
},
{
“MenuId”：2，
“Menuame”：“新交易”，
“MenuLink”：空，
“动作”：空，
“控制器”：空，
“ParentID”：空，
“巫师”：2，
“ModuleId”：空，
“菜单”：{
}
},
{
“MenuId”：3，
“Menuame”：“投资组合”，
“MenuLink”：空，
“动作”：空，
“控制器”：空，
“ParentID”：空，
“巫师”：3，
“ModuleId”：空，
“菜单”：{
}
},
{
“MenuId”：4，
“Menuame”：“分析”，
“MenuLink”：空，
“动作”：空，
“控制器”：空，
“ParentID”：空，
“巫师”：4，
“ModuleId”：空，
“菜单”：{
}
},
{
“MenuId”：5，
“菜单名”：“说明”，
“MenuLink”：空，
“动作”：空，
“控制器”：空，
“ParentID”：空，
“巫师”：5，
“ModuleId”：空，
“菜单”：{
}
},
{
“MenuId”：6，
“菜单名”：“数据上传”，
“MenuLink”：空，
“动作”：空，
“控制器”：空，
“ParentID”：空，
“巫师”：6，
“ModuleId”：空，
“菜单”：{
}
},
{
“MenuId”：7，
“Menuame”：“管理”，
“MenuLink”：空，
“动作”：空，
“控制器”：空，
“ParentID”：空，
“巫师”：7，
“ModuleId”：空，
“菜单”：[
{
“MenuId”：8，
“梅努梅”：“大师”，
“MenuLink”：空，
“动作”：空，
“控制器”：空，
“家长ID”：7，
“巫师”：1，
“ModuleId”：空，
“菜单”：[
{
“MenuId”：10，
“货币”：“货币”，
“MenuLink”：“/货币/指数”，
“行动”：“索引”，
“控制员”：“货币”，
“家长ID”：8，
“巫师”：1，
“ModuleId”：空，
“菜单”：{
}
},
{
“MenuId”：11，
“Menuame”：“国家”，
“MenuLink”：“/国家/指数”，
“行动”：“索引”，
“控制员”：“国家”，
“家长ID”：8，
“巫师”：2，
“ModuleId”：空，
“菜单”：{
}
}
]
},
{
“MenuId”：9，
“菜单名”：“用户管理”，
“MenuLink”：空，
“动作”：空，
“控制器”：空，
“家长ID”：7，
“巫师”：2，
“ModuleId”：空，
“菜单”：{
}
}
]
}
]
}
];
对于（变量i=0，j=data[0].menu.length；i 0）{
$（“#menu”）.append（