Javascript deep copy (values) not working in array

Question

Hi I'm playing around with node.js and Javascript for an upcoming project. I have an array of template objects called templateValues.

Now I'd like to copy these two objects with altered id's into an new array myArray.

let templateValues = [{'id':1 , 'type': 'a'},{'id':2 , 'type': 'b'}];
let myArray = [];

for (let index = 0; index < 10; index++) {
 myArray =  myArray.concat(templateValues.map(e => {
   e.id = Math.random(); // suppose this gives a unique id
   return e;
  }).slice(0));	
}
console.log(myArray);

OUTPUT:

{id: 0.13413583461207668, type: "a"}
{id: 0.7426427992455211, type: "b"}
{id: 0.13413583461207668, type: "a"}
{id: 0.7426427992455211, type: "b"}
{id: 0.13413583461207668, type: "a"}
{id: 0.7426427992455211, type: "b"}
{id: 0.13413583461207668, type: "a"}
{id: 0.7426427992455211, type: "b"}
...

Why are the ids all the same even if I do slice(0) of the altered templateValues-array to get a "data-copy"?!

You're modifying the original object references, not adding new objects to the list. The IDs will all be the same. — user47589
– user47589, Commented Jun 28, 2018 at 20:01

intentionally-left-nil · Accepted Answer · 2018-06-28 20:08:35Z

4

When you call slice, you are modifying the array object, not the contents of the array itself. There are no lines of code in your example that clone the underlying object, and thus, when you set e.id = Math.random(), you are editing the same object over and over again.

The fix here is to clone e before you modify it. Try Object.assign({}, e) before editing it to make a shallow copy of each item.

See the below example:

let templateValues = [{'id':1 , 'type': 'a'},{'id':2 , 'type': 'b'}];
let myArray = [];

for (let index = 0; index < 10; index++) {
    myArray =  myArray.concat(templateValues.map(e => {
       const eCopy = Object.assign({}, e, {id: Math.random()})
       return eCopy;
  }).slice(0)); 
}
console.log(myArray);

You can also use the ES2018 object spread syntax to achieve the same result. Simply replace Object.assign with {...e, id: Math.random()}

edited Jun 28, 2018 at 20:08

answered Jun 28, 2018 at 20:02

intentionally-left-nil

8,3858 gold badges40 silver badges62 bronze badges

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

Comments

baao · Accepted Answer · 2018-06-28 20:05:15Z

1

The other answer and comment already explains the problem, so I'll just offer a solution - you can use below to get what you need, the length of the new array can be set to whatever you want, the types will repeat itself in the same order of your original array

let templateValues = [{'id':1 , 'type': 'a'},{'id':2 , 'type': 'b'}];
const newArr = Array.from ({length: 10}, (_, i) => ({
    id: Math.random(),
    type: templateValues[i % templateValues.length].type
}));
console.log(newArr);

answered Jun 28, 2018 at 20:05

baao

73.5k18 gold badges152 silver badges208 bronze badges

Collectives™ on Stack Overflow

Javascript deep copy (values) not working in array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related