Changing the key name in an array of objects?

Question

How can I change the key name in an array of objects?

var arrayObj = [{key1:'value1', key2:'value2'},{key1:'value1', key2:'value2'}];

How can I change each key1 to stroke so that I get:

var arrayObj = [{stroke:'value1', key2:'value2'},{stroke:'value1', key2:'value2'}];

Answer 1

In recent JavaScript (and TypeScript), use destructuring with rest syntax, spread syntax, and array map to replace one of the key strings in an array of objects.

const arrayOfObj = [{
  key1: 'value1',
  key2: 'value2'
}, {
  key1: 'value1',
  key2: 'value2'
}];
const newArrayOfObj = arrayOfObj.map(({
  key1: stroke,
  ...rest
}) => ({
  stroke,
  ...rest
}));

console.log(newArrayOfObj);

Answer 2

var i;
for(i = 0; i < arrayObj.length; i++){
    arrayObj[i].stroke = arrayObj[i]['key1'];
    delete arrayObj[i].key1;
}

Answer 3

ES6 map() method:

let arrayObj = [{key1:'value1', key2:'value2'},{key1:'value1', key2:'value2'}];

arrayObj = arrayObj.map(item => {
      return {
        stroke: item.key1,
        key2: item.key2
      };
    });

Answer 4

You can't change a property name, you have to add the value with a new name and delete the old property:

for (var i = 0; i < arrayObj.length; i++) {
  arrayObj[i].stroke = arrayObj[i].key1;
  delete arrayObj[i].key1;
}

Answer 5

just one line of code needed with ES6

try following code :

arrayObj.map(({ stroke, key2 }) => ({ yourNewKey: stroke, yourNewKey2: key2 }));

Answer 6

const company =  [{ id:"1", name:"somename"},{ id:"1", name:"somename"}]

company.map(({ id, name }) => ({ companyId: id, companyName: name }));

// output
//[{ companyId:"1", companyName:"somename"},{ companyId:"1", //companyName:"somename"}]

Answer 7

You don't change a key name. You can assign a new key name/value and then remove the previous key if you want. In your example:

var arrayObj = [{key1,'value1', key2:'value2'},{key1,'value1', key2:'value2'}];
var o = arrayObj[0];   // get first object
var val = o.key1;      // get current value
o.stroke = val;        // assign to new key
delete o.key1;         // remove previous key

If you wanted to do that for all the objects in your main array, you would just put that in a loop that iterates over the contents of your array. I've put more intermediate assignments in here than neccessary just to document what's going on.

Or a shortened version in a loop:

for (var i = 0; i < arrayObj.length; i++) {
    var o = arrayObj[i];
    o.stroke = o.key1;
    delete o.key1;
}

Answer 8

function changeKey(originalKey, newKey, arr)
{
  var newArr = [];
  for(var i = 0; i < arr.length; i++)
  {
    var obj = arr[i];
    obj[newKey] = obj[originalKey];
    delete(obj[originalKey]);
    newArr.push(obj);
  }
  return newArr;
}

Answer 9

pure javascript

var array=[{oldkey:'oldkeyvalue',oldkey2:'oldkey2'}]
var result=array.map(({ oldkey: newkey, ...rest }) => ({ newkey, ...rest }));
console.log(result)

lodash or underscore js

//Lodash/underscore.js
_.map(array,(({ oldkey: newkey, ...rest }))=>({ oldkey: newkey, ...rest }))

The above technique cant set string name

eg:full name or last name

wrong way:

name:full name

right way

name:full_name

you can achieve string object in same way using map

array.map((x)=>{
var y={};
//also use spread operator if necessary but key want to remove manually

y['full name']=x['name'];
return y;
})

Answer 10

You can use an immutable way of changing an object. You can also add new key-value pairs to the object

let arrayOfObj = [{id:"0",name:'myName'},{id:"2",name:'myNewName'}]
const newArr = arrayOfObj.map(item => ({ ...item, id : Number(item.id),someRandomKey:'RandomValue' }))
console.log(newArr)