在打字稿中递归更新嵌套对象中的值

Question

We need to update the object in nested objects using recursion in typescript .Need to add extra properties to the object which is in a nested object . Nesting can change overtime and so recursion will only work Below is the input data :

[
  {
    "headerName": "Group 1",
    "children": [
      {
        "field": "G1-C1"
      },
      {
        "field": "G1-C2"
      }
    ]
  },
  {
    "headerName": "Group 2",
    "children": [
      {
        "headerName": "G2 - C1",
        "children": [
          {
            "field": "G2 - C1-C1"
          },
          {
            "field": "G2 - C1-C2"
          }
        ]
      },
      {
        "field": "G2-C2"
      },
      {
        "field": "G2-C3"
      }
    ]
  },
  {
    "headerName": "Group3",
    "children": [
      {
        "field": "G3-C1"
      },
      {
        "field": "G3-C2"
      }
    ]
  }
]

which needed to be transformed as :

[
  {
    "headerName": "Group 1",
    "children": [
      {
        "field": "G1-C1",
        "visible": true,
        "width": 200,
        "headerName": "Group1"
      },
      {
        "field": "G1-C2",
        "visible": true,
        "width": 200,
        "headerName": "Group1"
      }
    ]
  },
  {
    "headerName": "Group 2",
    "children": [
      {
        "headerName": "G2 - C1",
        "children": [
          {
            "field": "G2 - C1-C1",
            "width": 200,
            "headerName": "Group2-C1"
          },
          {
            "field": "G2 - C1-C2",
            "width": 200,
            "headerName": "Group2-C1"
          }
        ]
      },
      {
        "field": "G2-C2",
        "width": 200,
        "headerName": "Group2"
      },
      {
        "field": "G2-C3",
        "width": 200,
        "headerName": "Group2"
      }
    ]
  },
  {
    "headerName": "Group3",
    "children": [
      {
        "field": "G3-C1",
        "width": 200,
        "headerName": "Group3"
      },
      {
        "field": "G3-C2",
        "width": 200,
        "headerName": "Group3"
      }
    ]
  }
]

Tried several ways but was not able to find a way . It would be great help of there is any quick way to find a solution for this problem . This below method works but not sure if its is correct .

          formatData(columns: any) {     
            columns.forEach((i: any,index) => {
              if (i.hasOwnProperty('children')) {       
                this.formatData(i.children);
              } else {       
                columns[index] = {...{ field : i.field, headerName: 
                i.field, sortable: true, hide: false }};                    
              }      
            });            
          } 
           

Answer 1

FIrst of all we need to define type of our data structure:

type WithChildren = {
  headerName: string,
  children: DataStructure[]
}

type WithoutChildrenInput = {
  field: string,
}


type WithoutChildrenOutput = {
  field: string,
} & Pick<WithChildren, 'headerName'>

type DataStructure = WithChildren | WithoutChildrenInput

type DataStructureOutput = WithChildren | WithoutChildrenOutput

Then we can define our logic:

const fieldOutput = (
  field: string,
  headerName: string
) => ({
  field,
  headerName,
  visible: true,
  width: 200,
})

const childrenOutput = (headerName: string, children: DataStructure[]) => (
  { headerName, children: builder(children, headerName) }
)

const withChildren = <Obj, Prop extends string>(obj: DataStructure)
  : obj is WithChildren =>
  Object.prototype.hasOwnProperty.call(obj, 'children');

const builder = (data: DataStructure[], headerName = ''): DataStructureOutput[] =>
  data.reduce<DataStructureOutput[]>((acc, elem) =>
    withChildren(elem)
      ? [...acc, childrenOutput(elem.headerName, elem.children)]
      : [...acc, fieldOutput(elem.field, headerName)], [])

const result = builder(data)

I have created two helpers: childrenOutput and fieldOutput .

fieldOutput - just creates a plain object of field entity. nothing special

childrenOutput - generates expected data structure with children and calls under the hood builder function.

withChildren - is a user defined typeguard which helps narrow the type

You may think that it is a bad practice to call function before you define it. You can declare builder with function keyword or pass third argument to childrenOutput like here:

const childrenOutput = (headerName: string, children: DataStructure[], callback: (data: DataStructure[], headerName: string) => DataStructureOutput[]) => (
  { headerName, children: builder(children, headerName) }
)

It is up to you.

Whole code:

type WithChildren = {
  headerName: string,
  children: DataStructure[]
}

type WithoutChildrenInput = {
  field: string,
}


type WithoutChildrenOutput = {
  field: string,
} & Pick<WithChildren, 'headerName'>

type DataStructure = WithChildren | WithoutChildrenInput

type DataStructureOutput = WithChildren | WithoutChildrenOutput

const data: DataStructure[] = [
  {
    "headerName": "Group 1",
    "children": [
      {
        "field": "G1-C1"
      },
      {
        "field": "G1-C2"
      }
    ]
  },
  {
    "headerName": "Group 2",
    "children": [
      {
        "headerName": "G2 - C1",
        "children": [
          {
            "field": "G2 - C1-C1"
          },
          {
            "field": "G2 - C1-C2"
          }
        ]
      },
      {
        "field": "G2-C2"
      },
      {
        "field": "G2-C3"
      }
    ]
  },
  {
    "headerName": "Group3",
    "children": [
      {
        "field": "G3-C1"
      },
      {
        "field": "G3-C2"
      }
    ]
  }
]

const fieldOutput = (
  field: string,
  headerName: string
) => ({
  field,
  headerName,
  visible: true,
  width: 200,
})

const childrenOutput = (headerName: string, children: DataStructure[], callback: (data: DataStructure[], headerName: string) => DataStructureOutput[]) => (
  { headerName, children: builder(children, headerName) }
)

const withChildren = <Obj, Prop extends string>(obj: DataStructure)
  : obj is WithChildren =>
  Object.prototype.hasOwnProperty.call(obj, 'children');

const builder = (data: DataStructure[], headerName = ''): DataStructureOutput[] =>
  data.reduce<DataStructureOutput[]>((acc, elem) =>
    withChildren(elem)
      ? [...acc, childrenOutput(elem.headerName, elem.children, builder)]
      : [...acc, fieldOutput(elem.field, headerName)], [])

const result = builder(data)

console.log({ result })

Playground