javascript - 如何使用 json 对象创建水平菜单？

Question

我有一个像

var data = [
        {
        "parent": "Home",
        "child": [

                ]
        },
        {"parent": "Services",
        "child": [
                {"title":"Infrastruture"},
                {"title":"Development"}

                ]
        },
        {
        "parent": "Sector",
        "child": [
                {"title":"Recruitment Consultant"},
                {"title":"Change Management"},
                {"title":"Industrial Relations"}
                ]
        },          
        ]

我想针对这个 json 制作一个水平菜单。我是新的 json 对象。那么我该怎么做呢？

Answer 1

这应该可以完成。

标记

<ul id="nav"></ul>

JavaScript

var data = [
    {
    "parent": "Home",
    "child": [

            ]
    },
    {"parent": "Services",
    "child": [
            {"title":"Infrastruture"},
            {"title":"Development"}

            ]
    },
    {
    "parent": "Sector",
    "child": [
            {"title":"Recruitment Consultant"},
            {"title":"Change Management"},
            {"title":"Industrial Relations"}
            ]
    },          
    ];
$(function() {
    var nav = $("#nav");
    $.each(data,function(idx, obj){
        if(obj.child.length>0)
        {
            nav.append('<li><a href="#">'+obj.parent+'</a><ul id="'+obj.parent+'">'); //Create Parent menu and attach Child menu items list with ID same as parent menu name.
            var parent = $("#"+obj.parent); //Select this parent to insert child items.

            //Insert child menu items.
            $.each(obj.child, function(idx, childobj){
                parent.append('<li><a href="#">'+childobj.title+'</a></li>');
            });
            nav.append('</ul></li>'); //Close each tag.
        }
        else
        {
            nav.append('<li><a href="#">'+obj.parent+'</a></li>'); //No child menu items present, just create parent menu.
        }
    });
});

这可能在语义上是错误的，因为我们有太多的标记与 JS 相结合（不是一个好主意），但只要结构保持不变，这样做就可以了。

演示小提琴

PS：我把造型部分留给你。提示：在 JS 本身中提供类以及标记。;-)

Answer 2

您可以像访问 json 一样访问您的 json Javascript Object。你可以这样做：

for (var i = 0; i < data.length; i++) {

    createHeaderLink(data[i].parent);
    createChildLinks(data[i].child);

}