JavaScript Object Rename Key

Question

Is there a clever  i e  optimized  way to rename a key in a javascript object   A non-optimized way would be   o  new key     o  old key    delete o  old key

User · Answer

The most complete  and correct  way of doing this would be  I believe   if  old key     new key        Object defineProperty o  new key          Object getOwnPropertyDescriptor o  old key        delete o old key       This method ensures that the renamed property behaves identically to the original one    Also  it seems to me that the possibility to wrap this into a function method and put it into Object prototype is irrelevant regarding your question

User · Answer

If you re mutating your source object  ES6 can do it in one line   delete Object assign o    newKey   o oldKey     oldKey     Or two lines if you want to create a new object   const newObject       delete Object assign newObject  o    newKey   o oldKey     oldKey

User · Answer

While this does not exactly give a better solution to renaming a key  it provides a quick and easy ES6 way to rename all keys in an object while not mutating the data they contain    let b    a    1    b   2     Object keys b  map id   gt      b  root   id          b id      delete b id       console log b

User · Answer

Personally  the most effective way to rename keys in object without implementing extra heavy plugins and wheels   var str   JSON stringify object   str   str replace  oldKey g   newKey    str   str replace  oldKey2 g   newKey2     object   JSON parse str     You can also wrap it in try-catch if your object has invalid structure  Works perfectly

User · Answer

Your way is optimized  in my opinion  But you will end up with reordered keys  Newly created key will be appended at the end  I know you should never rely on key order  but if you need to preserve it  you will need to go through all keys and construct new object one by one  replacing the key in question during that process   Like this   var new o     for  var i in o       if  i  old key  new o new key  o old key      else new o i  o i     o new o

User · Answer

If you don   t want to mutate your data  consider this function    renameProp    oldProp  newProp     oldProp   old     others      gt        newProp   old       others     A thorough explanation by Yazeed Bzadough https   medium com front-end-hacking immutably-rename-object-keys-in-javascript-5f6353c7b6dd  Here is a typescript friendly version     These generics are inferred  do not pass them in  export const renameKey    lt    OldKey extends keyof T    NewKey extends string    T extends Record lt string  unknown gt   gt     oldKey  OldKey    newKey  NewKey extends keyof T   never   NewKey    userObject  T    Record lt NewKey  T OldKey  gt   amp  Omit lt T  OldKey gt    gt      const    oldKey   value     common     userObject    return          common             newKey   value   as Record lt NewKey  T OldKey  gt          It will prevent you from clobbering an existing key or renaming it to the same thing

User · Answer

const clone    obj    gt  Object assign     obj    const renameKey    object  key  newKey    gt         const clonedObj   clone object          const targetKey   clonedObj key                delete clonedObj key          clonedObj newKey    targetKey         return clonedObj             let contact    radiant  11  dire  22        contact   renameKey contact   radiant    aplha     contact   renameKey contact   dire    omega       console log contact        aplha  11  omega  22

User · Answer

You can use a utility to handle this    npm i paix   import   paix   from  paix    const source object     FirstName   Jhon   LastName   Doe   Ignored  true    const replacement     FirstName   first name   LastName   last name     const modified object   paix source object  replacement    console log modified object        Ignored  true  first name   Jhon   last name   Doe

User · Answer

You could wrap the work in a function and assign it to the Object prototype  Maybe use the fluent interface style to make multiple renames flow   Object prototype renameProperty   function  oldName  newName            Do nothing if the names are the same      if  oldName     newName             return this                Check for the old property name to avoid a ReferenceError in strict mode      if  this hasOwnProperty oldName             this newName    this oldName           delete this oldName             return this       ECMAScript 5 Specific  I wish the syntax wasn t this complex but it is definitely nice having more control   Object defineProperty      Object prototype        renameProperty                 writable   false     Cannot alter this property         enumerable   false     Will not show up in a for-in loop          configurable   false     Cannot be deleted via the delete operator         value   function  oldName  newName                   Do nothing if the names are the same             if  oldName     newName                    return this                               Check for the old property name to                 avoid a ReferenceError in strict mode              if  this hasOwnProperty oldName                     this newName    this oldName                   delete this oldName                             return this

User · Answer

In case someone needs to rename a list of properties     function renameKeys obj  newKeys      const keyValues   Object keys obj  map key   gt        const newKey   newKeys key     key      return    newKey   obj key             return Object assign        keyValues       Usage   const obj     a   1   b   2     const newKeys     a   A   c   C     const renamedObj   renameKeys obj  newKeys   console log renamedObj       A  1   b  2

User · Answer

You can try lodash   mapKeys    x000D   x000D  var user     x000D    name   Andrew   x000D    id  25  x000D    reported  false x000D     x000D   x000D  var renamed     mapKeys user  function value  key    x000D    return key         user id  x000D      x000D   x000D  console log renamed   x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 11 lodash js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

To add prefix to each key   const obj    foo   bar    const altObj   Object fromEntries    Object entries obj  map   key  value     gt          Modify key here       x-  key    value            altObj     x-foo    bar

User · Answer

const data   res const lista      let newElement  any  if  data  amp  amp  data length  gt  0       data forEach element   gt          newElement   element        Object entries newElement  map   key  value     gt          Object assign newElement               key toLowerCase     value            delete newElement key   delete newElement   id                lista push newElement         return lista

User · Answer

Yet another way with the most powerful REDUCE method    x000D   x000D  data    key1   value1   key2   value2   key3   value3     x000D   x000D  keyMap    key1   firstkey   key2   secondkey   key3   thirdkey    x000D   x000D  mappedData   Object keys keyMap  reduce  obj k    gt  Object assign obj     keyMap k    data k          x000D   x000D  console log mappedData   x000D   x000D   x000D

User · Answer

I d do something like this   function renameKeys dict  keyMap      return   reduce dict  function newDict  val  oldKey        var newKey   keyMap oldKey     oldKey     newDict newKey    val      return newDict

User · Answer

Some of the solutions listed on this page have some side-effects    affect the position of the key in the object  adding it to the bottom  if this matters to you  would not work in IE9   again  if this matters to you    Here is a solution which keeps the position of the key in the same place and is compatible in IE9   but has to create a new object and may not be the fastest solution   function renameObjectKey oldObj  oldName  newName        const newObj            Object keys oldObj  forEach key   gt            const value   oldObj key            if  key     oldName                newObj newName    value            else               newObj key    value                         return newObj      Please note  IE9 may not support forEach in strict mode

User · Answer

Most of the answers here fail to maintain JS Object key-value pairs order  If you have a form of object key-value pairs on the screen that you want to modify  for example  it is important to preserve the order of object entries   The ES6 way of looping through the JS object and replacing key-value pair with the new pair with a modified key name would be something like   let newWordsObject        Object keys oldObject  forEach key   gt      if  key     oldKey        let newPair      newKey   oldObject oldKey         newWordsObject        newWordsObject     newPair       else       newWordsObject        newWordsObject   key   oldObject key              The solution preserves the order of entries by adding the new entry in the place of the old one

User · Answer

Trying using lodash transform  var     require  lodash     obj        quot name quot    quot abc quot      quot add quot    quot xyz quot      var newObject     transform obj  function result  val  key       if  key      quot add quot         result  quot address quot     val     else       result key    val         console log obj   console log newObject

User · Answer

Here is an example to create a new object with renamed keys   let x     id   checkout   name   git checkout   description   checkout repository      let renamed   Object entries x  reduce  u   n  v     gt      u      n      v    return u

User · Answer

I would like just using the ES6 ES2015  way      we need keeping up with the times     x000D   x000D  const old obj     x000D      k1   111   x000D      k2   222   x000D      k3   333  x000D     x000D  console log  old obj   n   old obj   x000D      k1   111   k2   222   k3   333   x000D   x000D   x000D      x000D      author xgqfrms x000D      description ES6    spread  amp  Destructuring Assignment x000D      x000D   x000D  const   x000D      k1  kA   x000D      k2  kB   x000D      k3  kC  x000D          old obj  x000D   x000D  console log  kA     kA      kB     kB      kC     kC  n    x000D     kA   111  kB   222  kC   333 x000D   x000D  const new obj   Object assign  x000D          x000D        x000D          kA  x000D          kB  x000D          kC x000D        x000D     x000D   x000D  console log  new obj   n   new obj   x000D      kA   111   kB   222   kC   333   x000D   x000D   x000D

User · Answer

I would say that it would be better from a conceptual point of view to just leave the old object  the one from the web service  as it is  and put the values you need in a new object  I m assuming you are extracting specific fields at one point or another anyway  if not on the client  then at least on the server  The fact that you chose to use field names that are the same as those from the web service  only lowercase  doesn t really change this  So  I d advise to do something like this   var myObj         field1  theirObj FIELD1       field2  theirObj FIELD2       etc      Of course  I m making all kinds of assumptions here  which may not be true  If this doesn t apply to you  or if it s too slow  is it  I haven t tested  but I imagine the difference gets smaller as the number of fields increases   please ignore all of this     If you don t want to do this  and you only have to support specific browsers  you could also use the new getters to also return  uppercase field    see http   robertnyman com 2009 05 28 getters-and-setters-with-javascript-code-samples-and-demos  and the links on that page for more information   EDIT   Incredibly  this is also almost twice as fast  at least on my FF3 5 at work  See  http   jsperf com spiny001

User · Answer

This is a small modification that I made to the function of pomber  To be able to take an Array of Objects instead of an object alone and also you can activate index  also the  Keys  can be assigned by an array  function renameKeys arrayObject  newKeys  index   false        let newArray           arrayObject forEach  obj item   gt           const keyValues   Object keys obj  map  key i    gt                return   newKeys i     key  obj key                       let id    index      ID  item                 newArray push Object assign id     keyValues                return newArray      test  const obj      a   1   b   2       a   5   b   4       a   3   b   0      const newKeys     A   C    const renamedObj   renameKeys obj  newKeys   console log renamedObj

User · Answer

just try it in your favorite editor  lt 3  const obj    1   a   2   b   3   c    const OLD KEY   1 const NEW KEY   10  const    OLD KEY   replaceByKey     rest     obj const new obj          rest     NEW KEY   replaceByKey

User · Answer

A variation using object destructuring and spread operator  const old obj         k1   111       k2   222       k3   333             destructuring  with renaming  The variable  rest  will hold those values not assigned to kA  kB  or kC  const       k1  kA       k2  kB       k3  kC         rest     old obj           now create a new object  with the renamed properties kA  kB  kC      spread the remaining original properties in the  rest  variable const newObj    kA  kB  kC     rest    For one key  this can be as simple as  const   k1  kA     rest     old obj  const new obj     kA     rest    You may also prefer a more  traditional  style  const   k1     rest     old obj const new obj     kA  k1     rest

User · Answer

Rename Key but Avoid changing original Objects parameters oldJson   firstName  s1  lastName  v1              firstName  s2  lastName  v2              firstName  s3  lastName  v3     newJson   oldJson map rec   gt      return        Last Name   rec lastName       First Name   rec firstName                output    Last Name  quot v1 quot  First Name  quot s1 quot              Last Name  quot v2 quot  First Name  quot s2 quot              Last Name  quot v3 quot  First Name  quot s3 quot     better to have a new array

[javascript] JavaScript: Object Rename Key

Examples related to javascript

Examples related to object

Examples related to key

Examples related to rename