LaVOZs

The World’s Largest Online Community for Developers

'; javascript - Properly process nested array structure - LavOzs.Com

I am trying to process the below array using javascript. I need to loop through each group and its children and do something with the final result. I need to maintain a relationship from the parent to all of its groups/children. I thought I could achieve this using recursion, but I am failing to do so.

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

I have created a stackblitz to show what I have done so far:

https://stackblitz.com/edit/typescript-g37a33?file=index.ts

More clarification

As I loop through the groups, I need to create columns and add the children to the column to form a group.

For example the first item in the array with the groupId gp1: When I get to that item, I need to create a column with that id. Then I can see that it has children, which are also groups, so I create another column with the id group1 and add that as a child to gp1. I do the same with group2. Essentially I need to re-create the structure of columnGroups.

You'd have something like this:

You data structure is like:

An array of object, which may have a children property, which is in turn of an array of object (recursion). But each item in the children array might just have a field that is of interest, which can be processed or printed out in this case.

function processItems(arr, level = 0) {
  for (const e of arr) {
    if (e.label || e.groupId) console.log(`${" ".repeat(level * 4)}For ${e.label} ${e.groupId}`);
    if (e.field) console.log(`${" ".repeat(level * 4)}${e.field}`);
    if (e.children)
      processItems(e.children, level + 1);
  }
}

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

processItems(columnGroups)