How to clone a Javascript Array of Objects?

Question

I have a result set which is an array of objects. I need to clone this so I can make changes to it, without touching the original data.

var data = w2ui.grid.records,
exclude = Array('recid', 'w2ui'); // Exclude these data points from the pivot
// Modify our tempData records to remove HTML
$.each(data, function(key, value) {
    $.each(value, function(_key, _value) {
        if(jQuery.inArray(_key, exclude) != -1) {
            delete data[key][_key];
        }else{
            data[key][_key] = $('<div>'+_value+'</div>').text(); // <div></div> for those which are simply strings.
        }
    });
});

In this example, I created a variable called data and set it to my "Source Data".

I expected to be able to make changes to this new data variable but it appears that when making changes to it, the source data is being changed (w2ui.grid.records).

Is there a proper way to clone this set so I can have a new instance of the data to modify?

use slice(0). Example: clonedArray = originalArray.slice(0) it will create a new array. — Gerardo
– Gerardo, Commented Mar 1, 2017 at 5:37
Possible duplicate of How do I correctly clone a JavaScript object? — t.niese
– t.niese, Commented Mar 1, 2017 at 5:46

zer00ne · Accepted Answer · 2017-03-01 05:39:46Z

36

EDIT

Deep clone use JSON.parse(JSON.stringify(arr));

Shallow clone Use slice(0);

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

var arr = [{'obj1':1}, {'obj2':2}]
var clone = JSON.parse(JSON.stringify(arr));
console.log(clone);

edited Mar 1, 2017 at 5:39

answered Mar 1, 2017 at 5:32

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

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

6 Comments

monners Over a year ago

This will still pass sub-objects by reference, so mutations will affect the original.

SBB Over a year ago

I gave this a shot and it still appears to be removing (deleting the properties) from the source objects instead of the cloned ones. In my example, you can see where I have my check to see which properties I should be removing. Those are getting remove from w2ui.grid.records, my core data set that needs to be left untouched.

Rik Lewis Over a year ago

If you need a deep clone, because your array contains objects/arrays too, try this... github.com/pvorb/clone

SBB Over a year ago

The deep clone example worked perfectly in this situation. Thanks

zer00ne Over a year ago

@SBB you are welcome, but remember it doesn't work on objects with methods, just simple objects like JSON objects, plain objects, etc.

|

Remownz · Accepted Answer · 2018-09-08 11:27:39Z

14

ES6:

If you want to have cloned objects too, you have to spread array and objects:

const newArrayOfObjects = [
  ...originalArrayOfObject
].map(i => ({ ...i}));

answered Sep 8, 2018 at 11:27

Remownz

4171 gold badge4 silver badges18 bronze badges

2 Comments

Art Schmidt Over a year ago

You don't need to spread the array since map does that for you: const newArrayOfObjects = originalArrayOfObject.map(i => ({ ...i}));

Mario Over a year ago

please be aware that if you have a nested array this won't work correctly and create shallow copies.

TAHER El Mehdi · Accepted Answer · 2023-06-09 21:35:01Z

5

structuredClone

The modern way to deep copy an array of objects in JavaScript is to use structuredClone:

const arr1 =[{'obj1':1}, {'obj2':2}];
const arr2 = structuredClone(arr1); //copy arr1
arr2.push({'obj3':3});

console.log(arr1); //[{'obj1':1}, {'obj2':2}]
console.log(arr2); //[{'obj1':1}, {'obj2':2}, {'obj3':3}]

answered Jun 9, 2023 at 21:35

TAHER El Mehdi

9,6367 gold badges33 silver badges52 bronze badges

2 Comments

Liran H Over a year ago

Finally! Love this.

TAHER El Mehdi Over a year ago

I'm glad you like my code Welcome

Suchit kumar · Accepted Answer · 2019-11-05 05:00:32Z

3

Since you are using jquery you can try extend:

var arr = [{'obj1':1}, {'obj2':2}];
var clone = jQuery.extend(true, [], arr);
clone[0]['obj1']=10;
console.log(clone);
console.log(arr);

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

edited Nov 5, 2019 at 5:00

answered Mar 1, 2017 at 5:51

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

Comments

monners · Accepted Answer · 2017-03-01 05:33:03Z

1

Lodash has a method specifically for this called clonedeep. There's a standalone package for it if you don't want to pull in the entire library:

https://www.npmjs.com/package/lodash.clonedeep

answered Mar 1, 2017 at 5:33

monners

5,3422 gold badges31 silver badges47 bronze badges

Comments

Rik Lewis · Accepted Answer · 2017-03-01 05:40:00Z

1

This is because an array is held as a pointer, so setting a new variable just points to the same array.

The easiest way I know of is with slice...

var data = w2ui.grid.records.slice(0);

This creates a new array with all of the original values in, because you're slicing from the first one (0).

If you need a deep clone, because your array contains objects/arrays too, try this...

https://github.com/pvorb/clone

edited Mar 1, 2017 at 5:40

answered Mar 1, 2017 at 5:34

Rik Lewis

7494 silver badges10 bronze badges

Comments

Dharman · Accepted Answer · 2021-09-24 15:01:12Z

1

below code worked for me to deep Clone an array of object which does not have any function stored in them.

const deepClone = input => {
        if (typeof input !== 'object') return input;
        const output = Array.isArray(input) ? [] : {};
        const keys = Object.keys(input);
        keys.forEach(key => {
            output[key] = deepClone(input[key]);
        });
        return output;
    };

edited Sep 24, 2021 at 15:01

Dharman♦

33.9k27 gold badges103 silver badges157 bronze badges

answered Sep 24, 2021 at 14:55

arfath77

313 bronze badges

Comments

WitVault · Accepted Answer · 2017-03-01 05:45:12Z

0

There are various ways to do it-

let arr = [{
  'obj1': 1
}, {
  'obj2': 2
}];

// 1
const arr2 = arr.slice();
console.log(arr2);

// 2
const arr3 = [].concat(arr);
console.log(arr3);

// 3
// or use the new ES6 Spread
const arr4 = [...arr];
console.log(arr4);

// 4
const arr5 = Array.from(arr);
console.log(arr5);

answered Mar 1, 2017 at 5:45

WitVault

24.2k20 gold badges107 silver badges137 bronze badges

1 Comment

zero_cool Over a year ago

None of these will prevent mutating the original data. If you mutate a value one of the copies, the original value will also change because they have the same reference.

Arun Kumar · Accepted Answer · 2017-03-01 05:46:43Z

-1

You can achieve this from ES6 spread operators

var arr1 = [1]
var arr2 = arr1
arr1 === arr2 //true
arr2.push(2)
arr2  //[1, 2]
arr1  //[1, 2]
var arr3 = [...arr1]  //create a copy of existing array
arr1 === arr3  //false
arr2 === arr3  //false
arr3.push(3)
arr3  //[1, 2, 3]
arr1  //[1, 2]
arr2  //[1, 2]

Same syntax can be used for javascripts object as well

var newObj = [...existingObj]

answered Mar 1, 2017 at 5:46

Arun Kumar

3311 gold badge5 silver badges15 bronze badges

7 Comments

Samuel Goldenbaum Over a year ago

This is not correct. The spread operator only copies the first level with a new reference, but the deeper values are still referenced together.

Arun Kumar Over a year ago

@SamuelG, I think you are trying to say that my answer was partially correct. Right...

Samuel Goldenbaum Over a year ago

the answer is misleading for users and not correct for the OP's question which was to clone an array of objects and make changes to it, without touching the original data.

Samuel Goldenbaum Over a year ago

No @arun, the answer is not correct. It's not an opinion - modifying objects within an array, as per the spread you suggested, will update the original array. That's not an opinion and does, in fact, make the answer incorrect. Feel free to test yourself for your own confirmation.

Samuel Goldenbaum Over a year ago

No, not deeper nested values. The question is titled: "How to clone a Javascript Array of Objects?" and then specifically says "...which is an array of objects. " Your example would reference primitives. Any internet user who searches something similar to "How to clone a Javascript Array of Objects" would find your answer - which is not a correct answer for cloning an array of objects without maintaining a reference. This has clearly been pointed out in several other answers so arguing further would only be viewed as defensive. Have a great day, no need to continue the thread.

|

Collectives™ on Stack Overflow

How to clone a Javascript Array of Objects?

9 Answers 9

6 Comments

2 Comments

structuredClone

2 Comments

Comments

Comments

Comments

Comments

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

6 Comments

2 Comments

structuredClone

2 Comments

Comments

Comments

Comments

Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related