CODEWITHSUNDEEP
javascriptjqueryarraysobjectecmascript-6
nb_nb_nb
nb_nb_nb

Reputation: 1381

Edit key names in object of arrays from another object

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'},
];

Upvotes: 0

Views: 60

Answers (3)

mhodges
mhodges

Reputation: 11116

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);

Upvotes: 1

Twisty
Twisty

Reputation: 30893

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>

Upvotes: 1

blex
blex

Reputation: 25634

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);

Upvotes: 1

Related Questions