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

How can I retrieve elements from the given json

本文关键字：json 检索 元素      更新时间：2024-06-26

我想迭代给定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中检索子菜单呢？

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

$.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元素（用于空子菜单数组），您可以使用typeof运算符检查Submenu属性的存在：

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

这可以从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');
            });
    });

Fiddle：http://jsfiddle.net/XVL69/

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

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

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/

相关文章：