YUI菜单：根据json对象的属性构建分层菜单

Question

我有一个json对象，它具有类型和产品的属性。我正在寻找一种循环元素的方法，并使用YUI菜单将它们组织成分层菜单，这样第一级将按类型对它们进行分组，然后第二级菜单将按产品分组。

json看起来像：

[{ "productId":1, "typeId": 1, "productName": "test", "typeName": "old", "itemId": 1, "itemName": "item1"},
{ "productId":2, "typeId": 2, "productName": "test2", "typeName": "new", "itemId": 2, "itemName": "item2"},
{ "productId":2, "typeId": 1, "productName": "test2", "typeName": "old", "itemId": 3, "itemName": "item3"}]

我希望能够循环遍历项目并通过循环将它们添加到正确的子菜单，但是YUI菜单的结构方式似乎并不是一种简单的方法。结果菜单结构类似于：

• 老
  • 测试
    • ITEM1
  • TEST2
    • 项目3
• 新
  • TEST2
    • ITEM2

问题澄清： 循环和创建单个项目很容易：

for ( var i in obj )
{
    menu.addItem(obj[i].itemName);
}

我需要做的是在子菜单不存在时循环创建子菜单并将项目附加到子菜单。总而言之，最多可能需要将200个项目分类到这些子菜单中，因此每个分支都有几个项目。我正在寻找一种简单的方法来进行检查/创建/追加工作流程。

Answer 1

在尝试创建列表之前，按以下顺序对JSON数据结构进行稳定排序：

1. 项目名称（可选）
2. 产品名称
3. 类型名称

这将按照与您执行树的深度优先搜索相同的顺序排列数据。其中

• 旧
  • 测试1
    • 第3项
    • 第1项
  • 测试2
    • 第2项
• 新
  • 测试2
    • 第4项

变为

Old > Test 1 > Item 1
Old > Test 1 > Item 3
Old > Test 2 > Item 2
New > Test 2 > Item 4

请注意，第一列或第二列的更改表示必须创建新的类别或子类别。

与此问题无关，您可能需要考虑另一种显示数据的方法。从用户的角度来看，滚动浏览包含200多个项目的一系列分层下拉菜单一定会很痛苦。