Changing the name of an object key dynamically in Angular 8

Question

Changing the name of an object key dynamically in Angular 8

I need to dynamically change the name of factORLossTree to savefactORLossTree within the function in the payload below.

After submitting the form, I receive the following data in the payload.

{
    "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"
 }

The code snippet is as follows:

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

Any help on how to achieve this would be greatly appreciated.

javascript angular typescript angular8

Answer 1

Answer №1

Of course! It's important to note that this particular issue is related to JavaScript and isn't tied to any specific framework like Angular.

Here's the solution in a nutshell: Let's assume your data is stored in a variable named payload

First, you check if the property exists. Then, you replace it with a new name:

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

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

Why does this work? By creating another reference to the original data before deleting the property, we ensure that one reference holds the updated name at the end.

If for some reason you need to clone the data instead, follow this approach:

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

This assumes that the property always contains an object. If the property is of primitive type (such as number, string, or boolean), you can skip the cloning step altogether since primitives are copied by their values while objects are handled by their references.

Answer 2

Of course! It's important to note that this particular issue is related to JavaScript and isn't tied to any specific framework like Angular.

Here's the solution in a nutshell: Let's assume your data is stored in a variable named payload

First, you check if the property exists. Then, you replace it with a new name:

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

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

Why does this work? By creating another reference to the original data before deleting the property, we ensure that one reference holds the updated name at the end.

If for some reason you need to clone the data instead, follow this approach:

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

This assumes that the property always contains an object. If the property is of primitive type (such as number, string, or boolean), you can skip the cloning step altogether since primitives are copied by their values while objects are handled by their references.

Changing the name of an object key dynamically in Angular 8

Answer №1

Similar questions

Struggling to retrieve user input from a textfield using React framework

Encountering difficulties in running bootstrap on nodejs

The Vue.js component was unable to retrieve the data

Refresh the homepage of a website using React Router by clicking on the site's logo from within the Home component

What causes the intersection observer handler to not trigger when using scrollTo or scrollIntoView?

Utilizing Jcrop on an image loaded via ajax

Filtering a JSON response from a MySQL database using a REST API built with Node and Express - How can I limit the number of objects returned by passing parameters through the URL?

Issue Encountered in NodeJS While Processing Multiple GET Requests

Implementing multi-select checkbox feature in Angular 7 using ng-select

Discovering the most efficient route between two locations within a grid of values

Enhance ng-grid with row expansion and collapse feature

The Challenge of the Universe's Origin

The build process was not successful and encountered an error. Subprocess cordova encountered an issue while compiling for android, resulting in an exit with code 1

Encountering a puzzling issue with React JS and Redux, where using fetch consistently

Encountering a SyntaxError with Angular (8) Http.post() due to an Unexpected token O in JSON at position 0 when trying to parse the

The S3 signature verification failed while generating a signed URL on the server-side using Node.js

Utilize typehead.js in Python Django to retrieve an updated data list directly from the database

Convergence phenomenon in SVG when two distinct paths intersect

Implement a sleek carousel within a Vue component

Ways to verify if an array contains elements from other arrays in Typescript