How to rename object keys inside array

Question

I have an array of objects like this:

const customers = [
  {
    customer_name: 'Negan', 
    customer_age: 45, 
    customer_weapon: 'Bat',
    customer_email: '[email protected]',
    customer_city: 'Washington' 
  },
  {
    customer_name: 'Daryl', 
    customer_age: 41, 
    customer_weapon: 'Crossbow',
    customer_email: '[email protected]',
    customer_city: 'Atlanta' 
  },
  {
    customer_name: 'Rick', 
    customer_age: 45, 
    customer_weapon: 'Magnum 357',
    customer_email: '[email protected]',
    customer_city: 'King County' 
  },
]

and I want to replace all keys inside objects with these keys:

const newKeys = [
   'firstname',
   'age',
   'weapon',
   'email',
   'city'
]

What is the best way to do this? An example will be appreciated!

can you show us what you've tried please ? we're help to correct your flaws, not to give you code — jonatjano
– jonatjano, Commented Aug 6, 2020 at 13:30
note: everyone should be aware of the fact that any approach based on just a list of replacement keys is really limited to just a single kind of a customer object's key order (and structure). The environment always has to ensure the same key creation order for every single customer object. — Peter Seliger
– Peter Seliger, Commented Aug 6, 2020 at 14:36

mickl · Accepted Answer · 2020-08-06 13:33:27Z

You can use Object.values() to retrieve values and then array.reduce() to compose a new object:

const customers = [
  {
    customer_name: 'Negan', 
    customer_age: 45, 
    customer_weapon: 'Bat',
    customer_email: '[email protected]',
    customer_city: 'Washington' 
  },
  {
    customer_name: 'Daryl', 
    customer_age: 41, 
    customer_weapon: 'Crossbow',
    customer_email: '[email protected]',
    customer_city: 'Atlanta' 
  },
  {
    customer_name: 'Rick', 
    customer_age: 45, 
    customer_weapon: 'Magnum 357',
    customer_email: '[email protected]',
    customer_city: 'King County' 
  },
];

const newKeys = [
   'firstname',
   'age',
   'weapon',
   'email',
   'city'
];

let result = customers.map(obj => 
    Object.values(obj).reduce((acc, cur, i) => { 
       acc[newKeys[i]] = cur; 
       return acc; }, {}));

console.log(result);

Peter Seliger · Accepted Answer · 2020-08-06 14:53:04Z

I strongly suggest the usage of a key replacement map over a simple list of new keys, for the latter is strongly depended on a customer object's key order.

If a customer object satisfies a 1:1 key mapping, go for an approach similar to this one, that maps a list of customer objects by creating a new customer object with each iteration step via reducing a list of key tuples with each tuple holding the old and the new key ...

function createNewCustomerFromOldOneViaBoundConfig(customer) {
  return Object.entries(this).reduce((newCustomer, [key, newKey]) => {

    newCustomer[newKey] = customer[key];
    return newCustomer;

  }, {});
};


const customerKeyReplacementMap = {
  customer_name: 'firstname',
  customer_age: 'age',
  customer_weapon: 'weapon',
  customer_email: 'email',
  customer_city: 'city'
};

const customers = [{

  customer_name: 'Negan', 
  customer_age: 45, 
  customer_weapon: 'Bat',
  customer_email: '[email protected]',
  customer_city: 'Washington' 
}, {
  customer_name: 'Daryl', 
  customer_age: 41, 
  customer_weapon: 'Crossbow',
  customer_email: '[email protected]',
  customer_city: 'Atlanta' 
}, {
  customer_name: 'Rick', 
  customer_age: 45, 
  customer_weapon: 'Magnum 357',
  customer_email: '[email protected]',
  customer_city: 'King County'

}].map(createNewCustomerFromOldOneViaBoundConfig, customerKeyReplacementMap);


console.log('customers : ', customers);

.as-console-wrapper { min-height: 100%!important; top: 0; }

As soon as at least one customer object violates a strict 1:1 mapping of its keys, one has to change the approach to creating and mutating a new customer object from its outdated counterpart.

This case also proves that any approach based on just a list of replacement keys is really limited to just a single kind of a customer object's key order (and structure) ...

function createNewCustomerFromOldOneAndMutateKeysViaBoundConfig(oldCustomer) {
  return Object.entries(this).reduce((customer, [oldKey, key]) => {

    customer[key] = customer[oldKey];
    delete customer[oldKey];

    return customer;

  }, Object.assign({}, oldCustomer));
};


const customerKeyReplacementMap = { 
  customer_name: 'firstname',
  customer_age: 'age',
  customer_weapon: 'weapon',
  customer_email: 'email',
  customer_city: 'city'
};

const customers = [{

  additional_key_1: 'FOO',

  customer_name: 'Negan', 
  customer_age: 45,
  
  additional_key_2: 'BAR',

  customer_weapon: 'Bat',
  customer_email: '[email protected]',
  customer_city: 'Washington' 
}, {
  additional_key_1: 'BAZ',

  customer_name: 'Daryl', 
  customer_age: 41,

  additional_key_2: 'BIZ',

  customer_weapon: 'Crossbow',
  customer_email: '[email protected]',
  customer_city: 'Atlanta' 
}, {
  additional_key_1: 'FOOBAR',

  customer_name: 'Rick', 
  customer_age: 45,

  additional_key_2: 'BAZBIZ',

  customer_weapon: 'Magnum 357',
  customer_email: '[email protected]',
  customer_city: 'King County'

}].map(
  createNewCustomerFromOldOneAndMutateKeysViaBoundConfig,
  customerKeyReplacementMap
);


console.log('customers : ', customers);

.as-console-wrapper { min-height: 100%!important; top: 0; }

Majed Badawi · Accepted Answer · 2020-08-06 13:31:58Z

You can iterate over the objects, and then change the keys of each property by the ones in newKeys:

const customers = [
  {
    customer_name: 'Negan', 
    customer_age: 45, 
    customer_weapon: 'Bat',
    customer_email: '[email protected]',
    customer_city: 'Washington' 
  },
  {
    customer_name: 'Daryl', 
    customer_age: 41, 
    customer_weapon: 'Crossbow',
    customer_email: '[email protected]',
    customer_city: 'Atlanta' 
  },
  {
    customer_name: 'Rick', 
    customer_age: 45, 
    customer_weapon: 'Magnum 357',
    customer_email: '[email protected]',
    customer_city: 'King County' 
  },
]

const newKeys = [
   'firstname',
   'age',
   'weapon',
   'email',
   'city'
]

for (let i = 0; i < customers.length; i++) {
     let customer = customers[i];
     let j = 0;
     for(let p in customer){
          customer[newKeys[j++]] = customer[p];
          delete customer[p];
     }
}

console.log(customers);

Mamun · Accepted Answer · 2020-08-06 13:35:44Z

You can try using for...of and for...in loop:

const customers = [
  {
    customer_name: 'Negan', 
    customer_age: 45, 
    customer_weapon: 'Bat',
    customer_email: '[email protected]',
    customer_city: 'Washington' 
  },
  {
    customer_name: 'Daryl', 
    customer_age: 41, 
    customer_weapon: 'Crossbow',
    customer_email: '[email protected]',
    customer_city: 'Atlanta' 
  },
  {
    customer_name: 'Rick', 
    customer_age: 45, 
    customer_weapon: 'Magnum 357',
    customer_email: '[email protected]',
    customer_city: 'King County' 
  },
];
const newKeys = [
   'firstname',
   'age',
   'weapon',
   'email',
   'city'
]
for(var o of customers){
  var index = 0;
  for(var k in o){
    delete Object.assign(o, {[newKeys[index]]: o[k] })[k];
    index++;
  }
}
console.log(customers);

Yousaf · Accepted Answer · 2020-08-06 13:42:17Z

Map over the customers array and for each object in this array, iterate over its keys and add the values using these keys in a new object with the renamed property names. This way you will also avoid mutating original objects.

const customers = [
  { customer_name: 'Negan', customer_age: 45, customer_weapon: 'Bat', customer_email: '[email protected]', customer_city: 'Washington' },
  { customer_name: 'Daryl', customer_age: 41, customer_weapon: 'Crossbow', customer_email: '[email protected]', customer_city: 'Atlanta' },
  { customer_name: 'Rick', customer_age: 45, customer_weapon: 'Magnum 357', customer_email: '[email protected]', customer_city: 'King County' },
];

const newKeys = [ 'firstname', 'age', 'weapon', 'email', 'city' ];

const res = customers.map(obj => {
  const newObj = {};
  Object.keys(obj).forEach((k, i) => newObj[newKeys[i]] = obj[k]);
  return newObj;
});

console.log(res);

.as-console-wrapper { max-height: 100% !important; top: 0; }

A better approach would be to make newKeys an object that maps old keys to new keys. This way you won't have to rely on the ordering of keys in the objects.

For this, just change newKeys to an object as shown below:

const newKeys = { 
  customer_name: 'firstname', 
  customer_age: 'age', 
  customer_weapon: 'weapon',
  customer_email: 'email',
  customer_city: 'city'
};

and change the code in the .map() method in above code snippet to

const res = customers.map(obj => {
  const newObj = {};
  Object.keys(obj).forEach(k => newObj[newKeys[k]] = obj[k]);
  return newObj;
});

@Milos ... in my opinion this should be the excepted answer since Yousaf's answer shows awareness of the pitfalls of any approach that is solely based on a simple key replacement list instead of any form of a key replacement mapping.

Alex Ross · Accepted Answer · 2020-08-06 13:45:01Z

You can do a simple map. This way the order of the keys doesn't matter.

const customers = [{
    customer_name: 'Negan',
    customer_age: 45,
    customer_weapon: 'Bat',
    customer_email: '[email protected]',
    customer_city: 'Washington'
  },
  {
    customer_name: 'Daryl',
    customer_age: 41,
    customer_weapon: 'Crossbow',
    customer_email: '[email protected]',
    customer_city: 'Atlanta'
  },
  {
    customer_name: 'Rick',
    customer_age: 45,
    customer_weapon: 'Magnum 357',
    customer_email: '[email protected]',
    customer_city: 'King County'
  },
]

var updated = customers.map(customer => {
  const {
    customer_name,
    customer_age,
    customer_weapon,
    customer_email,
    customer_city
  } = customer;

  return {
    firstname: customer_name,
    age: customer_age,
    weapon: customer_weapon,
    email: customer_email,
    city: customer_city
  }
});

console.log(updated);

Parse Shyam · Accepted Answer · 2020-08-06 14:04:22Z

Can be done in this way too.

const customers = [
    {
        customer_name: 'Negan',
        customer_age: 45,
        customer_weapon: 'Bat',
        customer_email: '[email protected]',
        customer_city: 'Washington'
    },
    {
        customer_name: 'Daryl',
        customer_age: 41,
        customer_weapon: 'Crossbow',
        customer_email: '[email protected]',
        customer_city: 'Atlanta'
    },
    {
        customer_name: 'Rick',
        customer_age: 45,
        customer_weapon: 'Magnum 357',
        customer_email: '[email protected]',
        customer_city: 'King County'
    },
]

const newKeys = [
    'firstname',
    'age',
    'weapon',
    'email',
    'city'
]

let newArr = []

customers.map(c => {
    let obj = {}
    Object.values(c).map((v,i)=>{
        obj[newKeys[i]] = v;
    })
    newArr.push(obj)
})

console.log(newArr)

Rounin · Accepted Answer · 2020-08-06 13:30:50Z

2

Two steps:

Create a new key with a value copied from an existing key
Delete the key you just copied the value from

Working Example:

let myCustomer = {
  customer_name: 'Negan', 
  customer_age: 45 
}

myCustomer.firstname = myCustomer.customer_name;
myCustomer.age = myCustomer.customer_age;

delete myCustomer.customer_name;
delete myCustomer.customer_age;

console.log(myCustomer);

answered Aug 6, 2020 at 13:30

Rounin

29.8k13 gold badges102 silver badges126 bronze badges

Comments

Siva Kondapi Venkata · Accepted Answer · 2020-08-06 15:22:47Z

Using destructuring with rename

const update = (arr) =>
  arr.map(
    ({
      customer_name: firstname,
      customer_age: age,
      customer_weapon: weapon,
      customer_email: email,
      customer_city: city,
    }) => ({
      firstname,
      age,
      weapon,
      email,
      city,
    })
  );

const customers = [
  {
    customer_name: "Negan",
    customer_age: 45,
    customer_weapon: "Bat",
    customer_email: "[email protected]",
    customer_city: "Washington",
  },
  {
    customer_name: "Daryl",
    customer_age: 41,
    customer_weapon: "Crossbow",
    customer_email: "[email protected]",
    customer_city: "Atlanta",
  },
  {
    customer_name: "Rick",
    customer_age: 45,
    customer_weapon: "Magnum 357",
    customer_email: "[email protected]",
    customer_city: "King County",
  },
];

const newKeys = ["firstname", "age", "weapon", "email", "city"];

console.log(update(customers));

SomoKRoceS · Accepted Answer · 2020-08-11 21:54:20Z

Another option using replace while looking for the properties names in the stringified customers, then parsing in back to JSON:

const customers = [
  {
    customer_name: 'Negan', 
    customer_age: 45, 
    customer_weapon: 'Bat',
    customer_email: '[email protected]',
    customer_city: 'Washington' 
  },
  {
    customer_name: 'Daryl', 
    customer_age: 41, 
    customer_weapon: 'Crossbow',
    customer_email: '[email protected]',
    customer_city: 'Atlanta' 
  },
  {
    customer_name: 'Rick', 
    customer_age: 45, 
    customer_weapon: 'Magnum 357',
    customer_email: '[email protected]',
    customer_city: 'King County' 
  },
]

const newKeys = [
   {from: 'customer_name', to:'firstname'},
   {from: 'customer_age', to:'age'},
   {from: 'customer_weapon', to:'weapon'},
   {from: 'customer_email', to:'email'},
   {from: 'customer_city', to:'city'}
]


let str = JSON.stringify(customers);

newKeys.forEach(o=>str = str.replace(new RegExp(o.from, 'g'), o.to));

console.log(JSON.parse(str));

MajiD · Accepted Answer · 2020-09-12 15:26:01Z

i have written this piece of code to satisfy all my needs on object property name changing.

deepRenameKeys = function(array: any[], shape: Object): any[] {
    if (!array || !array.length || !shape) return;
    return array.map(item => {
        let _obj = {};
        for (const key in shape) {
            if (shape.hasOwnProperty(key)) {
                _obj[key] = shape[key].split('.').length ?
                    shape[key].split('.').reduce((a, b) => a[b], item) :
                    item[shape[key]];
            }
        }
        return _obj;
    })
}

Note that you can also use dotted notation :

const customers = [
    {
        customer_name: 'Negan',
        customer_age: 45,
        customer_weapon: {
            kind: 'Bat',
            type: 'melee'
        },
        customer_email: '[email protected]',
        customer_city: 'Washington'
    },
    {
        customer_name: 'Daryl',
        customer_age: 41,
        customer_weapon: {
            kind: 'Crossbow',
            type: 'range'
        },
        customer_email: '[email protected]',
        customer_city: 'Atlanta'
    },
    {
        customer_name: 'Rick',
        customer_age: 45,
        customer_weapon: {
            kind: 'Magnum 357',
            type: 'range'
        },
        customer_email: '[email protected]',
        customer_city: 'King County'
    }
];

const newKeys = [
    'firstname': 'customer_name',
    'age': 'customer_age',
    'weapon': 'customer_weapon.kind',
    'weaponType': 'customer_weapon.type'
    'email': 'customer_email',
    'city': 'customer_city'
];

let newData = deepRenameKeys(customers, newKeys);

Collectives™ on Stack Overflow

How to rename object keys inside array

11 Answers 11

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Related