如何从 json 文件创建菜单 [关闭]

【问题标题】：How to create a menu from a json file [closed]如何从 json 文件创建菜单 [关闭]
【发布时间】：2013-02-26 20:44:52
【问题描述】：

我的任务是从 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/

【问题讨论】：

  • 看起来您的 JSFiddle 示例中已经有了解决方案。此外，我认为您在上面放置的代码在技术上不是 JSON，而是一堆嵌套的数组和对象文字。您是在寻求有关导入和解析 JSON 的帮助，还是只想知道如何遍历上述数组/对象并创建菜单？
  • 我想知道数组和对象是如何工作的..我是 json 新手..
  • JSON 只是数据存储格式，仅此而已。你的问题是“javascript是如何工作的”
  • 是的..我想知道javascript是怎么来的？
  • 数组和对象与 JSON 没有任何关系。 JSON == "An intrinsic object that provides functions to convert JavaScript values to and from the JavaScript Object Notation (JSON) format. The JSON.stringify function serializes a JavaScript value to JSON text. The JSON.parse function deserializes JSON text to produce a JavaScript value." 引用自 MSDN。您在这里处理非常常规的 JS 对象。

标签： javascript jquery html css json


【解决方案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) 来编写递归函数。

【讨论】：

  • @FSou1-你知道响应式设计吗？
【解决方案2】：

遍历数据：

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

【讨论】：

  • 您注意到了吗，每个菜单对象中都有一个"Menus: {}; 用于子菜单...
【解决方案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 .
});

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

【讨论】：

  • 但是您检查过 menuId 的输出吗？如果您可以尝试一次并告诉我，我可以帮助您。
  • 你可以在jsfiddle.net/s4DeS上查看。我想要这样的输出。我该如何为此编写脚本？
猜你喜欢
  • 2016-11-07
  • 1970-01-01
  • 2021-09-16
  • 2015-09-30
  • 1970-01-01
  • 1970-01-01
  • 2023-03-15
  • 1970-01-01
  • 2013-12-13
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode