angular - 如何通过迭代 typescript 中的数组和标签中的分组项来填充 MenuItem？

Question

我有以下数组:

array = [
    {active: true, category: "Category A", name: "One A"}, 
    {active: true, category: "Category B", name: "One B"}, 
    {active: true, category: "Category A", name: "Two A"}, 
    {active: true, category: "Category B", name: "Two B"}];

我想遍历这个数组并构建以下 MenuItem:

menuItems = [
      {
          label: 'Category A',
          items: [
            {label: 'One A'},
            {label: 'Two A'}
        ]
      },
      {
          label: 'Category B',
          items: [
            {label: 'One B'},
            {label: 'Two B'}
        ]
      }
    ];

我从

array.forEach((item) => {
    if(item.active) {
        menuItems.push({})            
    }
});

我想我必须知道如何使用标签作为键，但我不知道如何。我搜索了一段时间，我得到的最接近的是 this example ，但在这里他们正在使用 ul 和 li 构建菜单，我只想将数组(menuItem)绑定(bind)到 p-tieredMenu(来自 PrimeNG)。
你们能帮帮我吗？我提前谢谢你。
更新:我试图输出结果，看看我是否弄清楚如何实现我的目标:

if (value) {
    value.forEach((item) => {
        if(item.active) {
            // this.addFieldItems.push({})            
            console.log('category: ' + item.category + '\nname: ' + item.name);
        }
    });
}   

我觉得困难的是如何将正确的项目推到正确的位置。现在我可以通过将每个对象推送到 menuitem 数组来填充列表，方法是如何对它进行分组，以便每个类别都有子类别。
更新:
我几乎拥有它，但我得到一个无法读取未定义错误的属性:

if (value) {
  let catArray: any = [];
  value.forEach((item) => {
    if(item.active) {
      if (catArray.indexOf(item.category) < 0) {
        catArray.push(item.category);
      }
    }
  });
  catArray.forEach((cat: any) => {
    let arrItems: any = [];
    value.forEach((item) => {
      if(item.category == cat) {
        arrItems.push(
          { label: item.name
          }
        );
      }
    });
    this.addFieldItems.push({label: cat, items: arrItems});
  });
}

在上面的代码中，值是原始数组，addFieldItems 是所需的数组。这里有什么错误？

Answer 1

使用 Array.reduce() 将一个结构映射到另一个
为了在平面结构(原始数组)中每个元素上存在的某个键下将值组合到一个新数组中，我们需要执行以下操作:

遍历原始数组中的每个元素

检查我们的分组属性项在输出数组中的位置

将我们的项目添加为子项目。

如果我们的分组项不存在，我们将一个新项推送到我们的输出数组中，从而创建分组。

为此，我们将使用 Array.reduce和 Array.findIndex

function flatToMenuStructure(flatArray) {
  return flatArray.reduce((out, item) => {
    if (item.active) {
      // which array item do we group our current item under.
      let index = out.findIndex(e => e.label == item.category);
      // first time seeing this category, if index is -1.
      if (index === -1) {
        out.push({
          label: item.category,
          items: []
        });
        index = out.length - 1;
      }
      // add menu item to category.
      out[index].items.push({
        label: item.name
      })
    }
    return out;
  }, []);
}