How to do object assign but create new copies of arrays in javascript?
up vote
1
down vote
favorite
I have this code
this.data_table.editedIndex = this.data_table.items.indexOf(item);
this.data_table.editedItem = Object.assign({}, item);
this.data_table.edit.tabs.currentTab = 0;
this.data_table.dialog = true;
but i'm noticing an issue where when the item
has an array, i think the same array gets put in the new object. How can I change it so that it makes a new copy of the array? Preferably a deep copy of the array.
javascript
|
show 3 more comments
up vote
1
down vote
favorite
I have this code
this.data_table.editedIndex = this.data_table.items.indexOf(item);
this.data_table.editedItem = Object.assign({}, item);
this.data_table.edit.tabs.currentTab = 0;
this.data_table.dialog = true;
but i'm noticing an issue where when the item
has an array, i think the same array gets put in the new object. How can I change it so that it makes a new copy of the array? Preferably a deep copy of the array.
javascript
Try usingitem.slice(0)
. davidwalsh.name/javascript-clone-array
– Yaakov Ainspan
Nov 7 at 21:40
item is an object, just one of its properties is an array
– omega
Nov 7 at 21:41
@YaakovAinspan: that won't deep clone the array, i.e., you will get a new array but it will still refer to the same objects as the original array. A deep clone of the array might look like:var newArray = item.theArray.map(a => Object.assign({}, a));
. This basically does what OP is doing for the main object but applying it to the array as well. The problem is that I don't know of a one-liner, you might have to write a helper method.
– Cᴏʀʏ
Nov 7 at 21:41
also, the item is arbitrary so I can't hardcode its properties name.
– omega
Nov 7 at 21:42
is stringify, and parse the best option?
– omega
Nov 7 at 21:43
|
show 3 more comments
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have this code
this.data_table.editedIndex = this.data_table.items.indexOf(item);
this.data_table.editedItem = Object.assign({}, item);
this.data_table.edit.tabs.currentTab = 0;
this.data_table.dialog = true;
but i'm noticing an issue where when the item
has an array, i think the same array gets put in the new object. How can I change it so that it makes a new copy of the array? Preferably a deep copy of the array.
javascript
I have this code
this.data_table.editedIndex = this.data_table.items.indexOf(item);
this.data_table.editedItem = Object.assign({}, item);
this.data_table.edit.tabs.currentTab = 0;
this.data_table.dialog = true;
but i'm noticing an issue where when the item
has an array, i think the same array gets put in the new object. How can I change it so that it makes a new copy of the array? Preferably a deep copy of the array.
javascript
javascript
asked Nov 7 at 21:36
omega
9,45844128256
9,45844128256
Try usingitem.slice(0)
. davidwalsh.name/javascript-clone-array
– Yaakov Ainspan
Nov 7 at 21:40
item is an object, just one of its properties is an array
– omega
Nov 7 at 21:41
@YaakovAinspan: that won't deep clone the array, i.e., you will get a new array but it will still refer to the same objects as the original array. A deep clone of the array might look like:var newArray = item.theArray.map(a => Object.assign({}, a));
. This basically does what OP is doing for the main object but applying it to the array as well. The problem is that I don't know of a one-liner, you might have to write a helper method.
– Cᴏʀʏ
Nov 7 at 21:41
also, the item is arbitrary so I can't hardcode its properties name.
– omega
Nov 7 at 21:42
is stringify, and parse the best option?
– omega
Nov 7 at 21:43
|
show 3 more comments
Try usingitem.slice(0)
. davidwalsh.name/javascript-clone-array
– Yaakov Ainspan
Nov 7 at 21:40
item is an object, just one of its properties is an array
– omega
Nov 7 at 21:41
@YaakovAinspan: that won't deep clone the array, i.e., you will get a new array but it will still refer to the same objects as the original array. A deep clone of the array might look like:var newArray = item.theArray.map(a => Object.assign({}, a));
. This basically does what OP is doing for the main object but applying it to the array as well. The problem is that I don't know of a one-liner, you might have to write a helper method.
– Cᴏʀʏ
Nov 7 at 21:41
also, the item is arbitrary so I can't hardcode its properties name.
– omega
Nov 7 at 21:42
is stringify, and parse the best option?
– omega
Nov 7 at 21:43
Try using
item.slice(0)
. davidwalsh.name/javascript-clone-array– Yaakov Ainspan
Nov 7 at 21:40
Try using
item.slice(0)
. davidwalsh.name/javascript-clone-array– Yaakov Ainspan
Nov 7 at 21:40
item is an object, just one of its properties is an array
– omega
Nov 7 at 21:41
item is an object, just one of its properties is an array
– omega
Nov 7 at 21:41
@YaakovAinspan: that won't deep clone the array, i.e., you will get a new array but it will still refer to the same objects as the original array. A deep clone of the array might look like:
var newArray = item.theArray.map(a => Object.assign({}, a));
. This basically does what OP is doing for the main object but applying it to the array as well. The problem is that I don't know of a one-liner, you might have to write a helper method.– Cᴏʀʏ
Nov 7 at 21:41
@YaakovAinspan: that won't deep clone the array, i.e., you will get a new array but it will still refer to the same objects as the original array. A deep clone of the array might look like:
var newArray = item.theArray.map(a => Object.assign({}, a));
. This basically does what OP is doing for the main object but applying it to the array as well. The problem is that I don't know of a one-liner, you might have to write a helper method.– Cᴏʀʏ
Nov 7 at 21:41
also, the item is arbitrary so I can't hardcode its properties name.
– omega
Nov 7 at 21:42
also, the item is arbitrary so I can't hardcode its properties name.
– omega
Nov 7 at 21:42
is stringify, and parse the best option?
– omega
Nov 7 at 21:43
is stringify, and parse the best option?
– omega
Nov 7 at 21:43
|
show 3 more comments
2 Answers
2
active
oldest
votes
up vote
0
down vote
Instead of using Object.assign
create a helper method to iterate through the object, determine if a value is an array and explicitly copy it using a spread operator ( ... )
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
}
//create copy function
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
},
//our object
obj = {
aString: "hola!",
anArray: [1, 2, 3, 4, 5, 6]
},
//our new object
nObj = copyObj(obj);
//change the old object
obj.anArray[3] = 555555;
//the old object array is changed, but the new one isn't.
console.log("new object: ", nObj, "old object: ", obj);
Note to deep clone the Array and return entirely new Objects and Arrays from within the first level of the Array or deeper, you would implement this same technique with further conditionals and recursively call the function.
add a comment |
up vote
0
down vote
Lodash will do the trick. Try method _.merge(obj1, obj2)
https://lodash.com/docs/4.17.11#merge
Array and plain object properties are merged recursively.
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Instead of using Object.assign
create a helper method to iterate through the object, determine if a value is an array and explicitly copy it using a spread operator ( ... )
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
}
//create copy function
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
},
//our object
obj = {
aString: "hola!",
anArray: [1, 2, 3, 4, 5, 6]
},
//our new object
nObj = copyObj(obj);
//change the old object
obj.anArray[3] = 555555;
//the old object array is changed, but the new one isn't.
console.log("new object: ", nObj, "old object: ", obj);
Note to deep clone the Array and return entirely new Objects and Arrays from within the first level of the Array or deeper, you would implement this same technique with further conditionals and recursively call the function.
add a comment |
up vote
0
down vote
Instead of using Object.assign
create a helper method to iterate through the object, determine if a value is an array and explicitly copy it using a spread operator ( ... )
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
}
//create copy function
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
},
//our object
obj = {
aString: "hola!",
anArray: [1, 2, 3, 4, 5, 6]
},
//our new object
nObj = copyObj(obj);
//change the old object
obj.anArray[3] = 555555;
//the old object array is changed, but the new one isn't.
console.log("new object: ", nObj, "old object: ", obj);
Note to deep clone the Array and return entirely new Objects and Arrays from within the first level of the Array or deeper, you would implement this same technique with further conditionals and recursively call the function.
add a comment |
up vote
0
down vote
up vote
0
down vote
Instead of using Object.assign
create a helper method to iterate through the object, determine if a value is an array and explicitly copy it using a spread operator ( ... )
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
}
//create copy function
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
},
//our object
obj = {
aString: "hola!",
anArray: [1, 2, 3, 4, 5, 6]
},
//our new object
nObj = copyObj(obj);
//change the old object
obj.anArray[3] = 555555;
//the old object array is changed, but the new one isn't.
console.log("new object: ", nObj, "old object: ", obj);
Note to deep clone the Array and return entirely new Objects and Arrays from within the first level of the Array or deeper, you would implement this same technique with further conditionals and recursively call the function.
Instead of using Object.assign
create a helper method to iterate through the object, determine if a value is an array and explicitly copy it using a spread operator ( ... )
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
}
//create copy function
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
},
//our object
obj = {
aString: "hola!",
anArray: [1, 2, 3, 4, 5, 6]
},
//our new object
nObj = copyObj(obj);
//change the old object
obj.anArray[3] = 555555;
//the old object array is changed, but the new one isn't.
console.log("new object: ", nObj, "old object: ", obj);
Note to deep clone the Array and return entirely new Objects and Arrays from within the first level of the Array or deeper, you would implement this same technique with further conditionals and recursively call the function.
//create copy function
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
},
//our object
obj = {
aString: "hola!",
anArray: [1, 2, 3, 4, 5, 6]
},
//our new object
nObj = copyObj(obj);
//change the old object
obj.anArray[3] = 555555;
//the old object array is changed, but the new one isn't.
console.log("new object: ", nObj, "old object: ", obj);
//create copy function
let copyObj = o => {
let new_o = {};
for (let k of Object.keys(o)) {
(Array.isArray(o[k])) ? new_o[k] = [...o[k]]: new_o[k] = o[k];
}
return new_o;
},
//our object
obj = {
aString: "hola!",
anArray: [1, 2, 3, 4, 5, 6]
},
//our new object
nObj = copyObj(obj);
//change the old object
obj.anArray[3] = 555555;
//the old object array is changed, but the new one isn't.
console.log("new object: ", nObj, "old object: ", obj);
answered Nov 7 at 21:45
zfrisch
4,19111024
4,19111024
add a comment |
add a comment |
up vote
0
down vote
Lodash will do the trick. Try method _.merge(obj1, obj2)
https://lodash.com/docs/4.17.11#merge
Array and plain object properties are merged recursively.
add a comment |
up vote
0
down vote
Lodash will do the trick. Try method _.merge(obj1, obj2)
https://lodash.com/docs/4.17.11#merge
Array and plain object properties are merged recursively.
add a comment |
up vote
0
down vote
up vote
0
down vote
Lodash will do the trick. Try method _.merge(obj1, obj2)
https://lodash.com/docs/4.17.11#merge
Array and plain object properties are merged recursively.
Lodash will do the trick. Try method _.merge(obj1, obj2)
https://lodash.com/docs/4.17.11#merge
Array and plain object properties are merged recursively.
answered Nov 7 at 21:47
Sergii Korh
565
565
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53198197%2fhow-to-do-object-assign-but-create-new-copies-of-arrays-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Try using
item.slice(0)
. davidwalsh.name/javascript-clone-array– Yaakov Ainspan
Nov 7 at 21:40
item is an object, just one of its properties is an array
– omega
Nov 7 at 21:41
@YaakovAinspan: that won't deep clone the array, i.e., you will get a new array but it will still refer to the same objects as the original array. A deep clone of the array might look like:
var newArray = item.theArray.map(a => Object.assign({}, a));
. This basically does what OP is doing for the main object but applying it to the array as well. The problem is that I don't know of a one-liner, you might have to write a helper method.– Cᴏʀʏ
Nov 7 at 21:41
also, the item is arbitrary so I can't hardcode its properties name.
– omega
Nov 7 at 21:42
is stringify, and parse the best option?
– omega
Nov 7 at 21:43