Javascript How to update all Property Names in nested object

Issue

I would like to return a new object with the updated property names in the nested object.

For example in the fakeData below, I would like to update all the property names from:

id = Id
title =  PhaseTitle
subTasks = Phases
dependencyTest = Dependency
fromId = FromId
toId = ToId

The data that I am trying to update :

let fakeData = [
      {
        id: 7,
        title: 'Software validation, research and implementation',
        dependencyTest: null,
        subtasks: [
          {
            id: 18,
            title: 'Project Kickoff',
            dependencyTest: [
              {
                id: 100,
                fromId: 18,
                toId: 11,
              },
              {
                id: 101,
                fromId: 18,
                toId: 19,
              }
            ]
          },
          {
            id: 11,
            title: 'Research',
            dependencyTest: null,
            subtasks: [
              {
                id: 19,
                title: 'Validation with Customers',
                dependencyTest: [
                  {
                    id: 200,
                    fromId: 19,
                    toId: 18,
                  },
                  {
                    id: 330,
                    fromId: 19,
                    toId: 12,
                  }
                ]
              }
            ]
          },
          {
            id: 12,
            title: 'Design',
            dependencyTest: null,
            subtasks: [
              {
                id: 22,
                title: 'UI Design',
                dependencyTest: [{
                  id: 135,
                  fromId: 18,
                  toId: 19,
                }]
              }
            ]
          }
        ]
      }
    ];

So far I've tried to use the recurrsion to do this but the subtask are not updating correctly

  private test() : void {
    const updatedObject = [];
    const recursiveFn = (obj : any ) : void => {
      for (let i = 0; i < obj.length; i++) {
        const entity: any = {
          Id: obj[i].id,
          Duration: obj[i].duration,
          PhaseName: obj[i].title,
          Phases: obj[i].subtasks,
          Dependency: null
        };

        const dependency : any = [];

        if (obj[i].dependency && obj[i].dependency.length > 0) {
          for (const depend of obj[i].dependency) {
            dependency.push({
              Id: depend.id.toString(),
              FromId: depend.fromId.toString(),
              ToId: depend.toId.toString(),
              Type: depend.type
            });
          }
        }
        entity.Dependency = dependency;

        // This doesn't work
        updatedObject.push(entity);

        if (obj[i]?.subtasks?.length > 0) {
          recursiveFn(obj[i].subtasks);
        }
      }
    };

    recursiveFn(this.fakeData);
  }

Solution

This is a short solution it return a new array without changing the existing one.

It use recursion and uses the Object.entries and fromEntries functions that do exactly that are perfect for this use case

const mapping = {
  id: 'Id',
  title: 'PhaseTitle',
  subtasks: 'Phases',
  dependencyTest: 'Dependency',
  fromId: 'FromId',
  toId: 'ToId'
}


const rename = (data) => data.map(d => 
  Object.fromEntries(Object.entries(d).map(([k, v]) => {
    return [mapping[k] || k, Array.isArray(v)? rename(v):v]
  })))


let fakeData = [{
  id: 7,
  title: 'Software validation, research and implementation',
  dependencyTest: null,
  subtasks: [{
      id: 18,
      title: 'Project Kickoff',
      dependencyTest: [{
          id: 100,
          fromId: 18,
          toId: 11,
        },
        {
          id: 101,
          fromId: 18,
          toId: 19,
        }
      ]
    },
    {
      id: 11,
      title: 'Research',
      dependencyTest: null,
      subtasks: [{
        id: 19,
        title: 'Validation with Customers',
        dependencyTest: [{
            id: 200,
            fromId: 19,
            toId: 18,
          },
          {
            id: 330,
            fromId: 19,
            toId: 12,
          }
        ]
      }]
    },
    {
      id: 12,
      title: 'Design',
      dependencyTest: null,
      subtasks: [{
        id: 22,
        title: 'UI Design',
        dependencyTest: [{
          id: 135,
          fromId: 18,
          toId: 19,
        }]
      }]
    }
  ]
}];





console.log(rename(fakeData))

Answered By - R4ncid