从JSON创建菜单

我正在尝试使用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将是如下所示。

 
Borrusia Dortmund  

编辑：问题可能听起来像我没有尝试任何东西，但我有。 它只是我无法理解的JSON部分，Jsfiddle没有正确阅读它。 我想知道我的jSON格式是否格式不正确。 任何帮助，将不胜感激

Answer 1

只需迭代你的JSON.menu数组并从中生成菜单（重命名为JSON – > data …）：

 $(function () { var getMenuItem = function (itemData) { var item = $("
") .append( $("", { href: '#' + itemData.link, html: itemData.name })); if (itemData.sub) { var subList = $("
"); $.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/9uhchttps://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3/5/

Answer 2

像这样（递归函数）：

 function parseMenu(ul, menu) { for (var i=○○@○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○$@○○;i'+menu[i].name+''); if (menu[i].sub!=null) { var subul=$('
'); $(li).append(subul); parseMenu($(subul), menu[i].sub); } } } var menu=$('#menu'); parseMenu(menu, JSON.menu); 

http://jsfiddle.net/uDTk4/ – 包括上面的JSON（对象）。

制作输出/菜单：

 
 
Croatia
 
England
 
 
Arsenal
 
Liverpool
 
Manchester United
 
 
Spain
 
 
Barcelona
 
Real Madrid
 
 
Germany
 
 
Bayern Munich
 
Borrusia Dortmund
 
  

Answer 3

你的json无效。 正确的json在下面。

 {"menu":[ {"name": "Croatia", "link": "○○@○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○$@○○", "sub": null }, {"name": "England", "link": "○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○", "sub": [ {"name": "Arsenal","link": "○○@○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○$@○○-○○@○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○$@○○", "sub": null}, {"name": "Liverpool","link": "○○@○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○$@○○-○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○", "sub": null}, {"name": "Manchester United","link": "○○@○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○$@○○-○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○", "sub": null} ]}, {"name": "Spain", "link": "○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○", "sub": [ {"name": "Barcelona","link": "○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○-○○@○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○$@○○", "sub": null}, {"name": "Real Madrid","link": "○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○-○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○", "sub": null} ]}, {"name": "Germany", "link": "https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3","sub": [ {"name": "Bayern Munich","link": "https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3-○○@○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○$@○○", "sub": null}, {"name": "Borrusia Dortmund","link": "https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3-○○@https://stackoverflow.com/questions/19003285/creating-a-menu-from-json/3$@○○", "sub": null} ]} ]}