Javascript 正确处理嵌套数组结构

我正在尝试使用javascript处理下面的数组。我需要遍历每个小组及其孩子，并对最终结果做一些事情。我需要保持家长与所有小组/孩子之间的关系。我原以为我可以用递归实现这一点，但我没有做到

const columnGroups = [
  {
    label: "Grand Parent1",
    groupId: "gp1",
    children: [
      {
        label: "Group 1",
        groupId: "group1",
        children: [{ field: "group1_field1" }, { field: "group1_field2" }]
      },
      {
        label: "Group 2",
        groupId: "group2",
        children: [{ field: "group2_field1" }, { field: "group2_field2" }]
      }
    ]
  },
  {
    label: "Grand Parent2",
    groupId: "gp2",
    children: [
      {
        label: "Group 3",
        groupId: "group3",
        children: [
          {
            label: "Group 4",
            groupId: "group4",
            children: [{ field: "group4_field1" }]
          }
        ]
      }
    ]
  }
];

我创建了一个stackblitz来展示我迄今为止所做的工作：

更多澄清

当我在组中循环时，我需要创建列并将子项添加到列中以形成一个组

---

例如，数组中的第一个项具有groupId

gp1

：当我到达该项时，我需要创建一个具有该id的列。然后我可以看到它有子项，这些子项也是组，因此我创建了另一个具有id

group1

的列，并将其作为子项添加到

gp1

。我对

group2

也这样做。基本上，我需要重新创建

columnGroups

的结构

你会得到这样的结果：

您的数据结构如下所示：

一个对象数组，它可能有一个

子类

属性，该属性依次是一个对象数组（递归）。但是子数组中的每个项可能只有一个感兴趣的

字段

，在这种情况下可以处理或打印出来

函数processItems（arr，级别=0）{
用于（arr常数）{
if（e.label | | e.groupId）console.log（`${'。对${e.label}${e.groupId}重复（级别*4）}）；
if（e.field）console.log（`${.repeat（level*4）}${e.field}`）；
如果（如儿童）
处理项目（如子项，级别+1）；
}
}
常量列组=[{
标签：“祖父母1”，
groupId:“gp1”，
儿童：[{
标签：“第1组”，
groupId:“group1”，
儿童：[{
字段：“组1_字段1”
}, {
字段：“组1_字段2”
}]
},
{
标签：“第2组”，
groupId:“group2”，
儿童：[{
字段：“组2_字段1”
}, {
字段：“组2_字段2”
}]
}
]
},
{
标签：“祖父母2”，
groupId:“gp2”，
儿童：[{
标签：“第3组”，
groupId:“group3”，
儿童：[{
标签：“第4组”，
groupId:“group4”，
儿童：[{
字段：“组4_字段1”
}]
}]
}]
}
];
processItems（columnGroups）

请在问题本身中将相关代码作为a。您的输入和预期输出是什么？谢谢，谢谢。看起来不错。我可以在输出的同时维护父组吗？我已经让它再次打印出父组和标签@nopole。这很有帮助。我在我的问题中补充了更多的信息，说明我到底想达到什么目的。我将用您的代码尝试一下，看看我能走多远。是否可以打印以下内容，例如，在第1组第1组的第

行中，我也想显示
Parent1
，在
group1\u field1
中，我想显示
group1
？基本上显示当前项目的父groupId“例如，数组中第一个项目的组id为gp1：当我访问该项目时，我需要创建一个具有该id的列。然后我可以看到它有子项，这些子项也是组，因此我创建了另一个具有id group1的列，并将其作为子项添加到gp1中。我对group2也这么做。基本上，我需要重新创建columnGroups的结构。“什么是“创建列”？将其创建为数据结构，或者打印出来？或者您想要什么？