Edit key names in object of arrays from another object

Question

I want to be able to rename keys in an array of objects. I know how to do them manually, one by one. But what I want to do is rename the keys from another object.

My data:

let data = [
    {f_name: 'Harry', l_name: 'Potter', address: 'Godrics Hollow', colors:'red'},
    {f_name: 'Ron', l_name: 'Weasley', address: 'The Burrow', colors:'orange'},
    {f_name: 'Hermione', l_name: 'Granger', address: '123 London', colors: 'blue'},
];

My object looks like:

let obj = {'first_name': 'f_name', 'last_name': 'l_name', 'home': 'address'};

As you can see the values in obj match the keys in data.

I want to be able to rename the keys in data with the keys in obj.

I am able to do it with one value like:

let colorName = 'colors';
const rename = data.map(d => {
    return ({colorName: d[colorName]});
});

I am not sure how to do this with the obj.

How do I get my final data to look like:

data = [
    {first_name: 'Harry', last_name: 'Potter', home: 'Godrics Hollow', colorName:'red'},
    {first_name: 'Ron', last_name: 'Weasley', home: 'The Burrow', colorName:'orange'},
    {first_name: 'Hermione', last_name: 'Granger', home: '123 London', colorName: 'blue'},
];

I think you need to feed it into a new object. With each known index, create a new index with the known value. — Twisty, Apr 13 '21 at 18:26
Possible Duplictae of https://stackoverflow.com/questions/6809659/changing-the-key-name-in-an-array-of-objects — Twisty, Apr 13 '21 at 18:32

score 1 · Accepted Answer · answered Apr 13 '21 at 18:26

If you reverse obj, it will be easier. You can then use Object.entries and Object.fromEntries to replace the keys:

const data = [
    {f_name: 'Harry', l_name: 'Potter', address: 'Godrics Hollow', colors:'red'},
    {f_name: 'Ron', l_name: 'Weasley', address: 'The Burrow', colors:'orange'},
    {f_name: 'Hermione', l_name: 'Granger', address: '123 London', colors: 'blue'},
  ],
  obj = {'f_name': 'first_name', 'l_name': 'last_name', 'address': 'home'};
  
const result = data.map(d => Object.fromEntries(
    Object.entries(d).map(([k, v]) => [obj[k] || k, v])
));

console.log(result);

mhodges · Answer 2 · 2021-04-13T20:36:25.957

You can do it by using .map(), like so:

let data = [
    {f_name: 'Harry', l_name: 'Potter', address: 'Godrics Hollow', colors:'red'},
    {f_name: 'Ron', l_name: 'Weasley', address: 'The Burrow', colors:'orange'},
    {f_name: 'Hermione', l_name: 'Granger', address: '123 London', colors: 'blue'},
];
let obj = {'first_name': 'f_name', 'last_name': 'l_name', 'home': 'address'};

let mapped = data.map((person) => {
  // start with a basic template of the result object you want
  let template = {...obj};
  // now fill in the proper values for each key
  Object.entries(template).forEach(([key, value]) => {
    template[key] = person[value];
  })
  return template;
});

console.log(mapped);

Twisty · Answer 3 · 2021-04-13T18:45:22.937

Consider the following example, based on Changing the key name in an array of objects?

let myData = [{
    f_name: 'Harry',
    l_name: 'Potter',
    address: 'Godrics Hollow',
    colors: 'red'
  },
  {
    f_name: 'Ron',
    l_name: 'Weasley',
    address: 'The Burrow',
    colors: 'orange'
  },
  {
    f_name: 'Hermione',
    l_name: 'Granger',
    address: '123 London',
    colors: 'blue'
  },
];

let myElems = {
  'first_name': 'f_name',
  'last_name': 'l_name',
  'home': 'address'
};

$.each(myData, function(i, el) {
  var keys = Object.keys(myElems);
  $.each(keys, function(j, k) {
    el[k] = el[myElems[k]];
    delete el[myElems[k]]
  });
});

console.log(myData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This manipulates the original Object to now have the new Key Names.

Another Example, using it within a Function:

let myData = [{
    f_name: 'Harry',
    l_name: 'Potter',
    address: 'Godrics Hollow',
    colors: 'red'
  },
  {
    f_name: 'Ron',
    l_name: 'Weasley',
    address: 'The Burrow',
    colors: 'orange'
  },
  {
    f_name: 'Hermione',
    l_name: 'Granger',
    address: '123 London',
    colors: 'blue'
  },
];

let myElems = {
  'first_name': 'f_name',
  'last_name': 'l_name',
  'home': 'address'
};

function changeKeys(dataObj, keyObj) {
  $.each(dataObj, function(i, el) {
    var keys = Object.keys(keyObj);
    $.each(keys, function(j, k) {
      el[k] = el[myElems[k]];
      delete el[myElems[k]]
    });
  });
  return dataObj;
}

myData = changeKeys(myData, myElems);
console.log(myData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Why include the entire jQuery library to just use forEach, which is built into JS? — mhodges, Apr 13 '21 at 20:35

Edit key names in object of arrays from another object

3 Answers3