Question

我想迭代给定json菜单中的每个数据 json是

var jsonMenu = {

    "menu": [
        {
            "MenuId": "ApplicationId",
            "MenuName": "Application",
            "MenuLink": "#",
            "Submenu":
                [
                    {
                        "MenuId": "BasicInformationId",
                        "MenuName": "Basic Information",
                        "MenuLink": "#"
                    }
                ]
        },

        {
            "MenuId": "ReviewandSubmissionID",
            "MenuName": "Review and Submission",
            "MenuLink": "#"
        }

]
}

我使用给定的代码来迭代主菜单并且它已经工作了

$.each(jsonMenu, function (key3, value3) {
                $('<li id="' + value3.MenuId + '" class="menu-li"><span><img src="../Images/tab_arrow.png"/></span><a href="' + value3.MenuLink + '">' + value3.MenuName + '</a></li>').appendTo("#menuLeft");
});

但是如何从给定的json中检索子菜单？

Answer 1

您应该在当前循环中使用另一个循环：

$.each(jsonMenu.menu, function (key, value) {
    var $li = $('<li id="' + value.MenuId + '" class="menu-li"><span></span><a href="' + value.MenuLink + '">' + value.MenuName + '</a></li>');
    if (value.Submenu) {
        var $ul = $('<ul/>').appendTo($li);
        $.each(value.Submenu, function (_, v) {
            $ul.append('<li><a href="#">' + v.MenuName + '</a>...</li>');
        });
    }
    $li.appendTo("#menu");
});

http://jsfiddle.net/7x5En/

为了提高效率，您还可以使用for循环而不是$.each()实用程序函数，以避免生成嵌套的空ul元素（表示空的子菜单数组 ）您可以使用Submenu运算符检查typeof属性是否存在：

if (typeof value.Submenu !== 'undefined' && value.Submenu.length) { // ...  }

Answer 2

这适用于从json创建层次结构：

$.each(jsonMenu, function (key3, value3) {
            $('<li id="' + value3.MenuId + '" class="menu-li"><span><img src="../Images/tab_arrow.png"/></span><a href="' + value3.MenuLink + '">' + value3.MenuName + '</a></li>').appendTo("#menuLeft");
            $('<ul></ul>').appendTo("#" + value3.MenuId);
            $.each(value3, function (key, value) {
                    $('<li id="' + value.MenuId + '" class="menu-li"><span><img src="../Images/tab_arrow.png"/></span><a href="' + value.MenuLink + '">' + value.MenuName + '</a></li>').appendTo("#" + value3.MenuId + ' ul');
            });
    });

小提琴：http://jsfiddle.net/XVL69/

Answer 3

老实说，你应该为此使用模板框架。小胡子非常简单，重量轻。您甚至可以通过递归引用子菜单模板来处理任意深度的“子菜单”树。

但是，本着直接回答你问题的精神，我会创建一个功能，将你的子菜单添加到你的父菜单。以及创建链接的功能。你知道吗，而不是重复所有的代码？像这样：

function makeChildren(parentMenu){
    var html = $('<ul></ul>');
    var children = 'menu' in parentMenu ? 'menu' : 'Submenu';
    if (typeof parentMenu[children] === 'undefined' ||
        !parentMenu[children].length) {
        return html;
    }
    $.each(parentMenu[children], function(key, val){
        html.append($('<li><span><img alt="use css"/></span></li>')
            .attr('id', val.MenuId)
            .addClass('menu-li')
            .append(makeLink(val))
            .append(makeChildren(val))
        );
    });
    return html;
}

function makeLink(menu){
    return $('<a></a>')
        .attr('href', menu.MenuLink)
        .text(menu.MenuName);
}

如果你想玩它，这是一个工作小提琴。你基本上在你的jsonMenu上调用makeChildren：

http://jsfiddle.net/VLwjV/

如何从给定的json中检索元素

3 个答案: