Best way to rename object properties in ES6

Question

I'm still learning js and I need an advice. I get json object from backend, but keys have underscores. What is best practice to rename keys to, for example folder_name to Folder name? The list of properties is known and finished so I can keep new names in constants. At frontend I already use it like this:

const showPropertiesList = properties => Object.keys(properties).map(property => (
  <PropertyKey key={property}}>
    `${property}: ${properties[property]}`
  </PropertyKey>
));

It's better to use rename function in this map or create separate function before to get all renamed keys with values?

json file:

properties {
  folder_name: 'test',
  user_email: 'test@example.com',
  user_agreed: 1,
  site: 'example.com',
}

Have a look at this: https://stackoverflow.com/questions/21148419/efficiently-rename-re-map-javascript-json-object-keys-within-array-of-objects — David, Mar 05 '18 at 01:26

Kirill Simonov · Accepted Answer · 2021-06-08T18:18:34.283

12

You can create some kind of a mapping object and then use the following combination of Object.keys and reduce functions:

const properties = {
  folder_name: "test",
  user_email: "test@example.com",
  user_agreed: 1,
  site: "example.com"
};

const mapping = {
  folder_name: "Folder name",
  user_email: "User email",
  user_agreed: "User agreed",
  site: "Site"
};

const mapped = Object.keys(properties).reduce((acc, key) => {
  acc[mapping[key]] = properties[key];
  return acc;
}, {});

console.log(mapped);

edited Jun 08 '21 at 18:18

answered Mar 05 '18 at 01:40

Kirill Simonov

8,257
3
18
42

I think the OP knows how to do that, he/she wants to know the following: *it's better to use rename function in this map or create separate function before to get all renamed keys with values?* – Ele Mar 05 '18 at 01:47
1

@Ele Well, it depends on whether he/she needs this mapped object further or not. If not, it's easier and faster to rename properties inline, as the other answer suggests. – Kirill Simonov Mar 05 '18 at 01:53

score 7 · Answer 2 · answered Jun 30 '20 at 14:07

7

try this:

const { folder_name: folderName, user_email: email, ...others } = originObject;
const renamedPropsObject = { folderName, email, ...others }

answered Jun 30 '20 at 14:07

Vladimir Popov

121
2
3

score 1 · Answer 3 · edited Oct 21 '22 at 08:18

1

Am traveling so I can’t program atm. But I think this will drive you in the correct direction.

    let newArray = array()

    oldArray.forEach(function(value, key) {
        // do stuff here to change the key value
        let newKeyValue = //something 
        newArray[newKeyValue] = value;
    });

    // do stuff with newArray

Hope it helps. Not tester it!

edited Oct 21 '22 at 08:18

radovix

2,756
2
11
28

answered Mar 05 '18 at 01:49

Niels Lucas

739
1
12
31

score 0 · Answer 4 · answered Mar 05 '18 at 01:42

Mapping is a good approach, as the previous answer specifies.

In your case you can also do the renaming inline:

const showPropertiesList = properties => Object.keys(properties).map(property => (
  <PropertyKey key={property}}>
    `${property.replace('_', ' ')}: ${properties[property]}`
  </PropertyKey>
));

Depending on if you want it changed everywhere or just where presented to the user

Best way to rename object properties in ES6

4 Answers4