YUI Menu：根据 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 菜单的结构方式似乎不是一个简单的方法来做到这一点。由此产生的菜单结构将是这样的：

• 旧
  • 测试
    • 项目1
  • 测试2
    • 项目3
• 新
  • 测试2
    • 项目2
  2

问题澄清： 循环并创建单个项目非常简单：

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 多个项目的分层下拉菜单肯定会很痛苦。