Change key name in JavaScript object

Question

I am checking the attributes in a JavaScript object, replacing some of the keys by deleting the prefix "element" and saving the new values in another object.

var keys = Object.keys(json);
for (var j=0; j < keys.length; j++) {
   key = keys[j].replace("element_", "");
   switch(key) {
   default :
      tmp[key] = json[key];
      break;
   }
}

The matter is that when I do that, I can log all the keys, they have the correct names, but when I try to set the values associated to these keys, they are undefined (json[key]).

Is that due to the fact that I converted the keys (Objects) to Strings (with the replace method)?

What is the purpose of the switch statement?

user663031
– user663031

2015-09-08 08:08:08 +00:00
Commented Sep 8, 2015 at 8:08 — user663031
– user663031, Commented Sep 8, 2015 at 8:08

score 34 · Accepted Answer · 2015-09-08 08:24:38Z

34

We'll write a little function to fix the key the way you want.

function fix_key(key) { return key.replace(/^element_/, ''); }

Underscore

_.object(
  _.map(_.keys(json), fix_key),
  _.values(json)
)

ES5/loop

var keys = Object.keys(json);
var result = {};

for (i = 0; i < keys.length; i++) {
  var key = keys[i];
  result[fix_key(key)] = json[key];
}

return result;

ES5/reduce

Object.keys(json) . reduce(function(result, key) {
  result[fix_key(key)] = json[key];
  return result;
}, {});

ES6

Object.assign(
  {},
  ...Object.keys(json) .
    map(key => ({[fix_key(key)]: json[key]}))
)

This makes an array of little objects each with one key-value pair, using the ES6 "computed property name" feature, then passes them to Object.assign using the ES6 "spread" operator, which merges them together.

edited Sep 8, 2015 at 8:24

answered Sep 8, 2015 at 8:13

user663031

Sign up to request clarification or add additional context in comments.

5 Comments

SrvfUser Over a year ago

Why do we need to add the most outer parentheses here: ({[fix_key(key)]: json[key]}) ? thanks

user663031 Over a year ago

Because otherwise the curly bracket would be taken as the beginning of a JS code block, instead of the beginning of an object literal.

SrvfUser Over a year ago

I see. How does it work then, is it just applying the parentheses priority in code execution?

user663031 Over a year ago

The parentheses have no effect on semantics, just as 2 is identical to (2). In this case, they merely enclose an object literal. The effect is the same as writing ({a: 1}) anywhere.

Davis Jones Over a year ago

Fantastic. The ES6 solution is super elegant. Much appreciated.

Guffa · Accepted Answer · 2015-09-08 07:58:28Z

The problem is that you are looking for the property in the original object using the new key. Use keys[j] instead of key:

var keys = Object.keys(json);
for (var j=0; j < keys.length; j++) {
   var key = keys[j].replace(/^element_/, "");
   tmp[key] = json[keys[j]];
}

I uses a regular expression in the replace so that ^ can match the beginning of the string. That way it only replaces the string when it is a prefix, and doesn't turn for example noexample_data into no_data.

Note: What you have is not "a json", it's a JavaScript object. JSON is a text format for representing data.

Is that due to the fact that I converted the keys (Objects) to Strings (with the replace method)?

No. The keys are strings, not objects.

You could also change the properties in the original object by deleting the old ones and adding new:

var keys = Object.keys(json);
for (var j=0; j < keys.length; j++) {
   if (keys[j].indexOf("element_") == 0) {
     json[keys[j].substr(8)] = json[keys[j]];
     delete json[keys[j]];
   }
}

num8er · Accepted Answer · 2020-06-11 08:28:25Z

3

Try this:

var keys = Object.keys(json);
for (var j=0; j < keys.length; j++) {
   var key = keys[j]; // key
   var value = json[key]; // data
   delete json[key]; // deleting data with old key
   key = key.replace("element_", ""); // renaming key
   json[key] = value; // setting data with new key
}

or extend prototype of Object

Object.prototype.renameKey = function (oldName, newName) {
    if (!newName) return this;
    if (oldName === newName) return this;

    if (this.hasOwnProperty(oldName)) {
        this[newName] = this[oldName];
        delete this[oldName];
    }
    return this;
};

var keys = Object.keys(json);
keys.forEach(function(key) { json.renameKey(key, key.replace('element_', ''); });

edited Jun 11, 2020 at 8:28

answered Sep 8, 2015 at 7:52

num8er

19.5k4 gold badges50 silver badges61 bronze badges

Comments

Tsachi Shushan · Accepted Answer · 2021-04-11 18:48:49Z

3

ES2019

Object.fromEntries(
  Object.entries(json).map(([k,v]) => [k.replace('element_', ''), v])
);

edited Apr 11, 2021 at 18:48

answered Apr 11, 2021 at 15:54

Tsachi Shushan

813 bronze badges

Comments

ozil · Accepted Answer · 2015-09-08 07:48:12Z

2

key is not original json because you have remove element_ prefix

var keys = Object.keys(json);
for (var j=0; j < keys.length; j++) {
   key = keys[j].replace("element_", "");
   var _key = keys[j];
   switch(key) {
   default :
      tmp[key] = json[_key];
      break;
   }
}

answered Sep 8, 2015 at 7:48

ozil

7,1639 gold badges38 silver badges61 bronze badges

Collectives™ on Stack Overflow

Change key name in JavaScript object

5 Answers 5

Underscore

ES5/loop

ES5/reduce

ES6

5 Comments

Comments

Comments

ES2019

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Underscore

ES5/loop

ES5/reduce

ES6

5 Comments

Comments

Comments

ES2019

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related