How to replace the object key name dynamically Angular 8

Question

I want to rename the factORLossTree into savefactORLossTree dynamically inside the function from below payload.

I am getting below data on payload after submitting the form.

{
    "cluster":"Europe",
    "factory":"Caivano",
    "factoryId":"Caivano",    
    "factORLossTree":[
       {
          "skuid":"000000000067334539",
          "skuDescription":"MAG 55ml Mini PistHazelnut 8MP x6x120 EB",         
          "levelLosses":[
             {
                "level1":"Line Scheduling Losses",
                "variancePer":100
             }
          ],
          "isRowChecked":false
       }
    ],
    "submitType":"po"
 }

Below is my code .

saveOrUpdateORData() { 
    const formData = Object.assign({}, this.orLosstreeForm.value);
    if (formData.factORLossTree.length === 0) {
      this.dialogService.openDialog('Data Not Available');
      return false;
    }  
    console.log(formData,"formdata");
    return;   
  }

Expected Output

{
    "cluster":"Europe",
    "factory":"Caivano",
    "factoryId":"Caivano",    
    "savefactORLossTree":[
       {
          "skuid":"000000000067334539",
          "skuDescription":"MAG 55ml Mini PistHazelnut 8MP x6x120 EB",         
          "levelLosses":[
             {
                "level1":"Line Scheduling Losses",
                "variancePer":100
             }
          ],
          "isRowChecked":false
       }
    ],
    "submitType":"po"
 }

Can anyone please help me to do this.

Answer 1

Sure thing! Worth mentioning that this issue is purely JS and has nothing to do with your framework (e.g. - Angular)

To the point: let's assume that your payload is stored in a variable called payload

First - check if the property exists. Then - replace it:

const propertyName = 'put the property name here'
const newPropertyName = 'put the new property name here'

if (payload.hasOwnProperty(propertyName)) {
  payload[newPropertyName] = payload[propertyName]
  delete payload[propertyName]
}

Why this is working? Because we are creating another reference to the original data before deleting the property. At the end we end-up with one reference having the updated name

If (from some reason) you need to clone the data, follow this pattern instead:

if (payload.hasOwnProperty(propertyName)) {
  const clone = JSON.parse(JSON.stringify(payload[propertyName]))
  payload[newPropertyName] = clone
  delete payload[propertyName]
}

I assume that your property always contains an object. If the type of the property is primitive (e.g. - number, string or boolean) you can just skip the cloning phase all together (primitives are copied by their values while only objects are handled by their reference)