文章/答案/技术大牛

发布

社区首页 >问答首页 >从JSON创建菜单

问从JSON创建菜单
EN

Stack Overflow用户

提问于 2013-09-25 11:08:45

回答 3查看 47.2K关注 0票数 4

我正在尝试使用jQuery UI创建一个动态菜单。

我将从JSON文件中获取条目并创建菜单项。我决定在更大的规模上尝试之前先做一个小演示。下面是我想要它工作的小提琴。现在，我无法让它与JSON文件一起工作。

工作小提琴

这是JSON

var JSON = 
    {
       menu: 
          [
             {name: 'Croatia', link: '0', sub: null},
             {name: 'England', link: '1', sub: 
                [
                   {name: 'Arsenal',link: '0-0', sub: null},
                   {name: 'Liverpool',link: '0-1', sub: null},
                   {name: 'Manchester United',link: '0-2', sub: null}
                ]
             },
             {name: 'Spain', link: '2', sub: 
                [
                   {name: 'Barcelona',link: '2-0', sub: null},
                   {name: 'Real Madrid',link: '2-1', sub: null}
                ]
              },        
              {name: 'Germany', link: '3',sub: 
                [
                   {name: 'Bayern Munich',link: '3-1', sub: null},
                   {name: 'Borrusia Dortmund',link: '3-2', sub: null}
                ]
              }
          ]
    }

如何使用来自JSON的值来设计我的整个菜单，其中Li的值如下所示。

<li><a href="#3-2">Borrusia Dortmund</a>
</li>

编辑：这个问题听起来好像我什么都没试过，但我试过了。这只是我无法理解的JSON部分，Jsfiddle没有正确地阅读它。我想知道我的jSON是否没有正确的格式化。如能提供任何帮助，将不胜感激。

javascript

jquery

json

jquery-ui

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-09-25 12:04:17

只需迭代JSON.menu数组并从它生成菜单(重命名为JSON -> data .)：

$(function () {
    var getMenuItem = function (itemData) {
        var item = $("<li>")
            .append(
        $("<a>", {
            href: '#' + itemData.link,
            html: itemData.name
        }));
        if (itemData.sub) {
            var subList = $("<ul>");
            $.each(itemData.sub, function () {
                subList.append(getMenuItem(this));
            });
            item.append(subList);
        }
        return item;
    };

    var $menu = $("#menu");
    $.each(data.menu, function () {
        $menu.append(
            getMenuItem(this)
        );
    });
    $menu.menu();
});

http://jsfiddle.net/9uhc3/5/

票数 7

Stack Overflow用户

发布于 2013-09-25 11:34:25

像这样(递归函数)：

function parseMenu(ul, menu) {
    for (var i=0;i<menu.length;i++) {
        var li=$(ul).append('<li><a href="'+menu[i].link+'">'+menu[i].name+'</a></li>');
        if (menu[i].sub!=null) {
            var subul=$('<ul id="submenu'+menu[i].link+'"></ul>');
            $(li).append(subul);
            parseMenu($(subul), menu[i].sub);
        }
    }
}

var menu=$('#menu');
parseMenu(menu, JSON.menu);

http://jsfiddle.net/uDTk4/ --包括上面的JSON (对象)。

产出/菜单：

<ul id="menu">
    <li><a href="0">Croatia</a></li>
    <li><a href="1">England</a></li>
    <ul id="submenu1">
        <li><a href="0-0">Arsenal</a></li>
        <li><a href="0-1">Liverpool</a></li>
        <li><a href="0-2">Manchester United</a></li>
    </ul>
    <li><a href="2">Spain</a></li>
    <ul id="submenu2">
        <li><a href="2-0">Barcelona</a></li>
        <li><a href="2-1">Real Madrid</a></li>
    </ul>
    <li><a href="3">Germany</a></li>
    <ul id="submenu3">
        <li><a href="3-1">Bayern Munich</a></li>
        <li><a href="3-2">Borrusia Dortmund</a></li>
    </ul>
</ul>

票数 4

Stack Overflow用户

发布于 2013-09-25 11:25:54

你的儿子是无效的。正确的json在下面。

{"menu":[
    {"name": "Croatia", "link": "0", "sub": null
    },
    {"name": "England", "link": "1", "sub": [
        {"name": "Arsenal","link": "0-0", "sub": null},
        {"name": "Liverpool","link": "0-1", "sub": null},
        {"name": "Manchester United","link": "0-2", "sub": null}
        ]},
    {"name": "Spain", "link": "2", "sub": [
        {"name": "Barcelona","link": "2-0", "sub": null},
        {"name": "Real Madrid","link": "2-1", "sub": null}
    ]},        
    {"name": "Germany", "link": "3","sub": [
        {"name": "Bayern Munich","link": "3-1", "sub": null},
        {"name": "Borrusia Dortmund","link": "3-2", "sub": null}
        ]}
]}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19003285

复制

相似问题

问从JSON创建菜单
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从JSON创建菜单EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从JSON创建菜单
EN