jQuery基于JSON构建ul-li导航

我需要使用

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": []
      }
    ]
  }
];

---

有几个问题：

• 您正在一个

• 您的
  具有id

  #菜单

  ，必须是

  菜单

• 您应该将其全部包装在

  $（document）.ready（）中

• 您正在空元素上使用

  $.append（）

  。尽可能避免这种情况

这样做可以解决问题

另外，使用

items[items.length]=“html”

而不是

items.push（）

将加快代码的速度

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

这里是：

$.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>');
  }

});

$。每个（数据、函数（i）{
//控制台日志（i）；
项目=数据[i]。标题；
控制台日志（项目）；
if（数据[i].Menus.length）{
$（'#menu'）.append（'
'+item+'
'）；
$（'#'+data[i].MenuId）.append（'
'）；
子项=数据[i]。菜单；
对于（j=0；j”+子项[j].Title+''）；
}
}否则{
$（“#菜单”）。追加（“
”+项+”
）；
}
});

---

演示：您可以稍微清理一下（我已经定义了一些变量，但没有使用它，后来又匆匆使用了它（sub_item）…）

请也发布您的jquery代码。基于上面的json，您希望您的最终输出是什么样的？我不需要实现所有属性，只需要构建层次结构。就像父子关系（其他类和id我不需要它）一样，我的意思是我将管理它，使用类等等。我只是在解析它和构建层次结构时遇到了一些问题，我已经修复了：）我的错误请检查我添加的JSFIDLE url（做了一些更改）@davidbury我现在就检查它。@davidbury JSON是一个表示数据树结构的字符串。这里有一个Javascript对象。