Is there any way to rename js object keys using underscore.js

JavascriptJqueryunderscore.js

Javascript Problem Overview


I need to convert a js object to another object for passing onto a server post where the names of the keys differ for example

var a = {
    name : "Foo",
    amount: 55,
    reported : false,
    ...
    <snip/>
    ...
    date : "10/01/2001"
    } 

needs to turn into

a = {
  id : "Foo",
  total : 55,
  updated: false,
  ...
  <snip/>
  ... 
  issued : "10/01/2001"
  }

where I have lookup obj available for mapping all the keys

var serverKeyMap = {
    name : "id",
    amount : "total",
    reported : "updated",
     ...
    date : "issue"
    }
  

Is there a function available in underscore.js or jQuery that I can use that does this functionality?

thanks

Javascript Solutions


Solution 1 - Javascript

I know you didn't mention lodash and the answers already solve the problem, but someone else might take advantage of an alternative.

As @CookieMonster mentioned in the comments, you can do this with _.mapKeys:

_.mapKeys(a, function(value, key) {
    return serverKeyMap[key];
});

And the fiddle: http://jsfiddle.net/cwkwtgr3/

Solution 2 - Javascript

Similar to @pimvdb, you can also do it with a _.reduce:

_.reduce(a, function(result, value, key) {
    key = map[key] || key;
    result[key] = value;
    return result;
}, {});

Fiddle: http://jsfiddle.net/T9Lnr/39/

Solution 3 - Javascript

As far as I know there is no function built into either of these two libraries. You can make your own fairly easily, though: http://jsfiddle.net/T9Lnr/1/.

var b = {};

_.each(a, function(value, key) {
    key = map[key] || key;
    b[key] = value;
});

Solution 4 - Javascript

You could copy the values to the new properties with standard JavaScript, and remove the original properties with omit, as follows:

a.id = a.name;
a.total = a.amount;
a.updated = a.reported;
a = _.omit(a, 'name', 'amount', 'reported');

Solution 5 - Javascript

// key_map: {old_name1: new_name1, ... }
function rename_keys(object, key_map, is_picked=false){
  keys = _.keys(key_map);
  new_keys = _.values(key_map);
  picked = _.pick(object, keys);
  renamed = _.object(new_keys, _.values(picked));
  if(is_picked) return renamed;

  return _.chain(object).omit(keys).extend(renamed).value();
}

This may be slower than above answers.

Solution 6 - Javascript

No there is no function in either library that explicitly renames keys. Your method is also the fastest (see jsperf tests.) Your best bet, if possible, is to refactor either the client side or server side code so the objects are the same.

Solution 7 - Javascript

Why don't you use this simple java script ? Value of any key:value pair should be string/number/Boolean.

<script type="text/javascript">    
    var serverKeyMap = {
        name : "id",
        amount : "total",
        reported : "updated"
    };
    
    var a = {
        name : "Foo",
        amount: 55,
        reported : false
    };

    var b={}; // b is object where you will get your output
    
    for(i in serverKeyMap) b[serverKeyMap[i]]=a[i];
    
    console.log(b); // It gives what you need.

</script>

Solution 8 - Javascript

I have a transformation operator and would just like to apply it to all keys. I forked pimvdb's fiddle to produce a simple example. In this case it Capitalizes the key. And it dynamically builds the keymap, which I needed to assure works (thanks JSFiddle).

Here is the changed code:

var keymap = {};
_.each(a, function(value, key) {
    var oldkey = key;
    key = capitalize(key);
    keymap[oldkey] = key;
});
_.each(a, function(value, key) {
    key = keymap[key] || key;
    b[key] = value;
});

Fiddle: http://jsfiddle.net/mr23/VdNjf/

Solution 9 - Javascript

It's been solved here https://stackoverflow.com/a/30940370/1360897

var keyMapping = {'PropertyA': 'propertyA', ..., 'PropertyF': 'propertyNEW'}

and also a mapping of old and new values, like this

var valueMapping = {'Y': true, 'F': false}

And then using _.map and _.transform, you can transform the object, like this

var result = _.map(allItems, function(currentObject) {
    return _.transform(currentObject, function(result, value, key) {
        if (key === 'PropertyF' || key === 'PropertyG') {
            value = valueMapping(value);
        }
        result[keyMapping[key]] = value;
    });
});

Solution 10 - Javascript

As user2387823 was saying above  using omit is a great option. For example you could write something like this

function updateObjKey(obj, currentKey, newKey) {
    var keyValue = obj[currentKey];
    obj = _.omit(obj, [currentKey]);
    obj[newKey] = keyValue;
    return obj;
  }

Solution 11 - Javascript

this ES2015/2017 version 慄‍♂️

function objectMap(source,keyMap) {
    return Object.entries(keyMap).reduce((o,[key , newKey]) => {
            o[newKey]=source[key]
            return o;},{})
}

const obj = {
    name : "Foo",
    amount: 55,
    reported : false,
    date : "10/01/2001"
    }
    
const  serverKeyMap = {
    name : "id",
    amount : "total",
    reported : "updated",
    date : "issue"
    }
    
const result = objectMap(obj,serverKeyMap);

console.log('🎬 =>' , result);

> [Object.entries][1] is es2017 feture will return object key and > value as array >
> > [["name", "id"],["amount", "total"],...]

Solution 12 - Javascript

You really don't need underscore/lodash for this ... nowadays anyways (I realize the question was asked 9 years ago, but this question is (still) ranked highly in search results and I came across it today :-) )

Here's another plain ES2015/2017 version that I like, inspired by @malbarmavi's answer (there's probably a bunch of other plain JS functions out there, but I didn't come across any others in my brief search):

// A general key transform method. Pass it a function that accepts the old key and returns
// the new key.
//
// @example
//   obj = transformKeys(obj, (key) => (
//    key.replace(/\b(big)\b/g, 'little')
//  ))
export function transformKeys(source, f) {
  return Object.entries(source).reduce((o, [key, value]) => {
    o[f(key) || key] = value
    return o
  }, {})
}
 
// Provide an object that maps from old key to new key
export function rekeyObject(source, keyMap) {
  transformKeys(source, key => keyMap[key])
}

Solution 13 - Javascript

I referred the lodash documentation ans found mapKeys https://lodash.com/docs/4.17.15#mapKeys

_.mapKeys({ 'a': 1, 'b': 2 }, function(value, key) {
  return key + value;
});
// => { 'a1': 1, 'b2': 2 }

this perfectly renames the keys and return an object containing the modified desirable object

Solution 14 - Javascript

Using underscore omit and spread operator.

a = _.omit({
  ...a,
  id: a.name,
  total: a.amount,
  updated: a.reported,
}, ['name', 'amount', 'reported']);

Key assignments below spread operator loads new keys and omit omits the old ones.

Solution 15 - Javascript

You can create your new custom function :

lodash.rename = function(obj, keys, newKeys) {
  keys.map((key, index) => {
    if(lodash.includes(lodash.keys(obj), key)) {
      obj[newKeys[index]] = lodash.clone(obj[key], true);
      delete obj[key];
    }
  });
  return obj;
};

Or else if you want to edit only one keyName:

lodash.rename = function(obj, key, newKey) {
    if(lodash.includes(lodash.keys(obj), key)) {
      obj[newKeys[index]] = lodash.clone(obj[key], true);
      delete obj[key];
    }
  return obj;
};

Solution 16 - Javascript

Using lodash

var obj = _.renameKeys( { 1 : "Geeks",  
            2 : "Computer_Science_Portal" }, 
            { 1 : "g", 2 : "c" }); 

so in your case, you want to apply the serverKeyMap onto object a :

var obj = _.renameKeys(a, serverKeyMap);

from https://www.geeksforgeeks.org/lodash-_-renamekeys-method/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionclayaView Question on Stackoverflow
Solution 1 - JavascriptSamir AguiarView Answer on Stackoverflow
Solution 2 - JavascriptduleView Answer on Stackoverflow
Solution 3 - JavascriptpimvdbView Answer on Stackoverflow
Solution 4 - Javascriptuser2387823View Answer on Stackoverflow
Solution 5 - JavascriptZin KanzakiView Answer on Stackoverflow
Solution 6 - JavascriptJaredMcAteerView Answer on Stackoverflow
Solution 7 - JavascriptUmesh PatilView Answer on Stackoverflow
Solution 8 - Javascriptsw.chefView Answer on Stackoverflow
Solution 9 - JavascriptaemongeView Answer on Stackoverflow
Solution 10 - JavascriptBrandon HowardView Answer on Stackoverflow
Solution 11 - JavascriptMuhammed AlbarmaviView Answer on Stackoverflow
Solution 12 - JavascriptTyler RickView Answer on Stackoverflow
Solution 13 - JavascriptashuvssutView Answer on Stackoverflow
Solution 14 - JavascriptJithinView Answer on Stackoverflow
Solution 15 - JavascriptSiddharth SunchuView Answer on Stackoverflow
Solution 16 - JavascriptZettaPView Answer on Stackoverflow