JavaScript array map while keeping original elements in the array

Question

I have this array.

const data = [
  { name: "A", age: "12" },
  { name: "B", age: "5" },
  { name: "C", age: "6" }
];

I want to add additional property called key to this array like this.

const data = [
  { name: "A", age: "12", key: "A12" },
  { name: "B", age: "5", key: "B5" },
  { name: "C", age: "6", key: "C6" }
];

I tired this map function and output is not the one I expect. How do I achieve this using JS map function..

const data = [
  { name: "A", age: "12"},
  { name: "B", age: "5"},
  { name: "C", age: "6"}
];

console.log(
  "MAP",
  data.map(element => (element.key = element.name + element.age))
);

CertainPerformance · Accepted Answer · 2019-06-22 04:06:11Z

4

You need to return an object from the map callback:

const data = [
  { name: "A", age: "12"},
  { name: "B", age: "5"},
  { name: "C", age: "6"}
];

console.log(
  data.map(({ name, age }) => ({ name, age, key: name + age }))
);

If you wish to mutate the existing objects, then use forEach instead of .map:

const data = [
  { name: "A", age: "12"},
  { name: "B", age: "5"},
  { name: "C", age: "6"}
];

data.forEach((obj) => {
  obj.key = obj.name + obj.age;
});
console.log(data);

answered Jun 22, 2019 at 4:06

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack Bashford · Accepted Answer · 2019-06-22 04:07:24Z

3

Return element as well using the comma operator:

const data = [
  { name: "A", age: "12"},
  { name: "B", age: "5"},
  { name: "C", age: "6"}
];

console.log(data.map(element => (element.key = element.name + element.age, element)));

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

Or just change your map callback to make it simpler with destructuring:

const data = [
  { name: "A", age: "12"},
  { name: "B", age: "5"},
  { name: "C", age: "6"}
];

console.log(data.map(({ name, age }) => ({ name, age, key: name + age})));

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

answered Jun 22, 2019 at 4:07

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Comments

Akrion · Accepted Answer · 2019-06-22 05:05:51Z

There are more than one way to do this and the Array.map is by far the most concise and clean way to do it as already provided. Here are few other methods:

 const data = [ { name: "A", age: "12" }, { name: "B", age: "5" }, { name: "C", age: "6" } ];

let from = Array.from(data, ({name, age}) => ({name, age, key: name+age}))
let assign = data.map(({name, age}) => Object.assign({name, age}, {key: name+age}))

console.log('from: ', from)
console.log('assign: ', assign)

If you want to generate a key from all values (assuming all are primitives) you can also do this:

const data = [
  { name: "A", age: "12", city: 'Miami' },  // "key": "A12Miami"
  { name: "B", age: "2", gender: 'M'},      // "key": "B2M"
];

let all = data.map(obj => 
  ({...obj, ...Object.fromEntries([['key', Object.values(obj).join('')]])}))

console.log(all)

This way you do not have to specify or care about the pop names etc.

Collectives™ on Stack Overflow

JavaScript array map while keeping original elements in the array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related