jQuery基于JSON构建ul-li导航

Question

我需要使用 ul 和 li 标签构建一个动态菜单。必须使用我从 Web 服务器获得的以下 JSON 构建菜单。有什么想法可以根据这种结构使用 jQuery 实现这样的菜单吗？

var data = [
  {
    "MenuId": "4fde524c-9f8e-4fc4-a7c1-aea177090299",
    "ParentMenuId": null,
    "Title": "Home",
    "Icon": "fa fa-home",
    "DisplayOrder": 10,
    "MenuAction": "/Home/Index",
    "Menus": []
  },
  {
    "MenuId": "172f657e-6bbd-4cca-9ed6-a372dba3c9dc",
    "ParentMenuId": null,
    "Title": "Maintenance",
    "Icon": "fa fa-home",
    "DisplayOrder": 20,
    "MenuAction": "Maintenance",
    "Menus": [
      {
        "MenuId": "f7661f0c-7b0c-4967-bd68-6f39387d7cb8",
        "ParentMenuId": "172f657e-6bbd-4cca-9ed6-a372dba3c9dc",
        "Title": "Users",
        "Icon": "fa fa-home",
        "DisplayOrder": 10,
        "MenuAction": "/Maintenance/Users",
        "Menus": []
      },
      {
        "MenuId": "90130291-db76-4c46-8180-73c5a4056eae",
        "ParentMenuId": "172f657e-6bbd-4cca-9ed6-a372dba3c9dc",
        "Title": "Roles",
        "Icon": "fa fa-home",
        "DisplayOrder": 20,
        "MenuAction": "/Maintenance/Roles",
        "Menus": []
      }
    ]
  },
  {
    "MenuId": "867eee51-7702-45b4-9427-ea3bedec4c3e",
    "ParentMenuId": null,
    "Title": "Reports",
    "Icon": "fa fa-home",
    "DisplayOrder": 30,
    "MenuAction": "Reports",
    "Menus": [
      {
        "MenuId": "2905febe-e310-4bc8-abe1-6ec00093458e",
        "ParentMenuId": "867eee51-7702-45b4-9427-ea3bedec4c3e",
        "Title": "Report 1",
        "Icon": "fa fa-home",
        "DisplayOrder": 10,
        "MenuAction": "/Reports/Report1",
        "Menus": []
      },
      {
        "MenuId": "66d9d009-6e1f-4c2b-bf53-fba23bf5e133",
        "ParentMenuId": "867eee51-7702-45b4-9427-ea3bedec4c3e",
        "Title": "Report 2",
        "Icon": "fa fa-home",
        "DisplayOrder": 20,
        "MenuAction": "/Reports/Report2",
        "Menus": []
      }
    ]
  },
  {
    "MenuId": "5d3b2b07-8db8-44f4-97b4-30da0bb3cb88",
    "ParentMenuId": null,
    "Title": "Lookup",
    "Icon": "fa fa-home",
    "DisplayOrder": 40,
    "MenuAction": "Lookup",
    "Menus": [
      {
        "MenuId": "dba0985c-2cdb-4302-a405-fdd883c6b37a",
        "ParentMenuId": "5d3b2b07-8db8-44f4-97b4-30da0bb3cb88",
        "Title": "Logs",
        "Icon": "fa fa-home",
        "DisplayOrder": 10,
        "MenuAction": "/Lookup/Logs",
        "Menus": []
      },
      {
        "MenuId": "72344388-6e53-4626-93af-2f74c563f734",
        "ParentMenuId": "5d3b2b07-8db8-44f4-97b4-30da0bb3cb88",
        "Title": "Resources",
        "Icon": "fa fa-home",
        "DisplayOrder": 20,
        "MenuAction": "/Lookup/Resources",
        "Menus": []
      },
      {
        "MenuId": "e4dd9b30-b968-4a80-9284-1ca1c89e2eb0",
        "ParentMenuId": "5d3b2b07-8db8-44f4-97b4-30da0bb3cb88",
        "Title": "Lookup Tables",
        "Icon": "fa fa-home",
        "DisplayOrder": 30,
        "MenuAction": "/Lookup/LookupTables",
        "Menus": []
      }
    ]
  }
];

http://jsfiddle.net/z4wgaovq/10/

Answer 1

有几个问题：

您正在 <div>

<li>

您的 <div> 的 ID 为 #menu，并且必须为 menu
你应该把它全部包在一个 $(document).ready();
您正在对空元素使用 $.append()。尽可能避免这种情况。

这样做可以解决问题。

此外，使用 items[items.length]='html' 而不是 items.push() 将加快您的代码速度。

另外，请注意您的代码不是 JSON：那是一个常规的 Javascript 对象。

Answer 2

这里是：

$.each(data, function(i) {
  //console.log(i);
  item = data[i].Title;
  console.log(item);
  if (data[i].Menus.length) {
    $('#menu').append('<li class="has-sub" id="' + data[i].MenuId + '">' + item + '</li>');
    $('#' + data[i].MenuId).append('<ul></ul>');
    sub_item = data[i].Menus;
    for (j = 0; j < data[i].Menus.length; j++) {
      console.log(j);

      $('#' + data[i].MenuId + ' ul').append('<li>' + sub_item[j].Title + '</li>');

    }
  } else {
    $('#menu').append('<li>' + item + '</li>');
  }

});

Demo: http://jsfiddle.net/8mmy1aqu/ 你可以稍微清理一下（我定义了一些 vars ，但没有使用它，稍后使用它（sub_item）匆忙...... :))

jQuery基于JSON构建ul-li导航

jQuery build ul - li navigation based on JSON

jquery

json

twitter-bootstrap-3