Cannot clone my array of objects in JavaScript

Question

I want to clone my array of objects. Every one tells to use slice(0) but i don't understand, it's not working, check the fiddle. The property is avalaible in the two arrays.

I want to edit my objects in the first array and not in my second too. I already checked : How to clone a Javascript Array of Objects? It's the same with concat, extend. The only one i found is JSON.parse. I want to understand why people say the method slice cloned arrays.

var arr = [{'obj1':1}, {'obj2':2}];
var clone = arr.slice(0);
clone[0].test = "defined";

https://jsfiddle.net/zkzv2mp0/2/

Because `JSON.stringify` serializes everything into text form and `JSON.parse` makes objects out of that. No reference is kept. `slice(0)` is, as the answer already says, a shallow cloning method. I’m not exactly sure, where the misunderstanding is. — Sebastian Simon, Jul 13 '17 at 13:03
https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript Reference this question for deep cloning — Kanstantsin Arlouski, Jul 13 '17 at 13:04
It does clone array check `arr === clone // false`. But it doesn't clone elements `arr[0] === clone[0] //true` — Yury Tarabanko, Jul 13 '17 at 13:05
Ok, just understood, thanks. I will use var clone = JSON.parse(JSON.stringify(arr)); — Naxxan60, Jul 13 '17 at 13:05
The fiddler is not working because it is not recognizing the jQuery. You can look at the inspector on your browser. I just changed the slice from slice(0) to slice() and it worked for me. — MNF, Jul 13 '17 at 13:06
I forgot Jquery CDN. I added it. But it the same with slice(). — Naxxan60, Jul 13 '17 at 13:07
This isn’t answering the question at all and there’s no difference between `slice(0)` and `slice()`. — Sebastian Simon, Jul 13 '17 at 13:09

score 0 · Answer 1 · answered Jul 13 '17 at 13:13

0

var clone = JSON.parse(JSON.stringify(arr));

You could use JSON Stringify and JSON Parse to clone an Array. But be careful this only works if your array contains JSON serializable content.

answered Jul 13 '17 at 13:13

jrenk

1,387
3
24
46

score 0 · Accepted Answer · edited Jul 13 '17 at 13:25

0

The fiddler is pure JS. does not havejquery included.

See working example:

https://jsfiddle.net/zkzv2mp0/3/

But as you can see using slice(0); is a Shallow clone, where you want to update one without updating the original (deep clone) JSON.parse(JSON.stringify(arr))

edited Jul 13 '17 at 13:25

Naxxan60

7
7

answered Jul 13 '17 at 13:13

tyler_mitchell

1,727
1
19
27

score 0 · Answer 3 · answered Jul 13 '17 at 13:16

Ain't cristal clear what you want to do...

But here is what I think you try to achieve:

// Your initial array of objects.
var arr = [{'obj1':1}, {'obj2':2}];

// A cloned array of objects.
var clone = jQuery.extend(true, [], arr);

// Now sliced, keep the first object only
clone = clone.slice(0,1);
console.log(clone);

// Change the value of the object.
clone[0].obj1 = "defined";
console.log(clone);

// Show them in page.
$("#testarr").html(arr[0].obj1);
$("#testclone").html(clone[0].obj1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
In arr :
<span id="testarr">
</span></p>
<p>
In clone :
<span id="testclone">
</span>
</p>

Cannot clone my array of objects in JavaScript

3 Answers3