jQuery 从 JSON 创建菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19003285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a Menu from JSON
提问by MarsOne
I am trying to create a dynamic menu using jQuery UI.
我正在尝试使用 jQuery UI 创建一个动态菜单。
I will be fetching entries from a JSON file and creating my menu items.I decided to do a small demo before i try this on a larger scale.Here's my fiddle which works the way i want it to work. Now I cant get this to work with a JSON file.
我将从 JSON 文件中获取条目并创建我的菜单项。我决定先做一个小演示，然后再进行更大规模的尝试。这是我的小提琴，它按照我希望的方式工作。现在我无法让它与 JSON 文件一起使用。
Here is the 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}
]
}
]
}
How can i design my entire menu using the values from the JSON where the Li's will be something like the following.
我如何使用 JSON 中的值设计我的整个菜单，其中 Li 将类似于以下内容。
<li><a href="#3-2">Borrusia Dortmund</a>
</li>
EDIT:The question may sound like i have not tried anything, but i have. its just the JSON part which i cannot understand, Jsfiddle does not read it properly. I am wondering if my jSON is not formatted properly. Any help would be appreciated
编辑：这个问题听起来好像我什么都没试过，但我试过。它只是我无法理解的 JSON 部分，Jsfiddle 无法正确读取它。我想知道我的 json 格式是否不正确。任何帮助，将不胜感激
回答by sunn0
Just iterate your JSON.menu array and generate the menu from it (renamed JSON -> data ...):
只需迭代您的 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();
});
回答by davidkonrad
Like this (recursive function) :
像这样（递归函数）：
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/- including the JSON (object) from above.
http://jsfiddle.net/uDTk4/- 包括上面的 JSON（对象）。
Produced output / menu :
产生的输出/菜单：
<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>
回答by Jitendra Pancholi
Your json is invalid. Correct json is below.
您的 json 无效。正确的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}
]}
]}
