Create deep copy in angular 2

Question

How I can create deep copy in angular 2, I tried to use let newObject = Object.assign({}, myObject) but still myObject reflects all the changes done in newObject.

I thinks its typescript problem not angular2. correct me if I m wrong — Aniruddha Das, Dec 05 '16 at 04:12
Do you mean deep copy or shallow copy? http://stackoverflow.com/questions/184710/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy — Suraj Rao, Dec 05 '16 at 04:13
@SurajRao ok now I am also confused, I just want to reset my object to its default state when my work is done with that object. So to do that, I need to store that default copy, but when I make changes at one place all other copy also gets changed. How to prevent that? — Dheeraj Agrawal, Dec 05 '16 at 04:30
http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript — Suraj Rao, Dec 05 '16 at 04:46
prefer to use third party library like lodash, https://lodash.com/docs/4.17.2#cloneDeep — A.T., Dec 05 '16 at 05:47
@A.T. `jQuery.extend()` works fine here & I am already using jquery in my project so what's the benefit of loading whole new lib just only for single purpose? — Dheeraj Agrawal, Dec 05 '16 at 05:55
@DheerajAgrawal you didn't mention you are using jQuery any where, btw I am big fan of $, but I prefer lodash for angular development. — A.T., Dec 05 '16 at 06:00

glemiere · Accepted Answer · 2020-06-15T00:38:20.117

4

Just use the following function :

/**
 * Returns a deep copy of the object
 */

public deepCopy(oldObj: any) :any {
    var newObj = oldObj;
    if (oldObj && typeof oldObj === "object") {
        newObj = Object.prototype.toString.call(oldObj) === "[object Array]" ? [] : {};
        for (var i in oldObj)
            newObj[i] = this.deepCopy(oldObj[i]);
    }
    return newObj;
}

edited Jun 15 '20 at 00:38

answered Dec 05 '16 at 05:39

glemiere

4,790
7
36
60

score 2 · Answer 2 · answered Dec 05 '16 at 05:42

2

Try to use the Lodash.js . Because angular 2 does not have any method for deep copy . for reference see :https://lodash.com/docs#cloneDeep

or You can use this javascript function

var copy = Object.assign({}, myObject);

answered Dec 05 '16 at 05:42

Jitendra gupta

98
8

Do you think including lodash just for this one feature is reasonable? To add 2 numbers would you install math.js? So would you keep adding random third party libraries for every trivial task you run into? – Playdome.io May 01 '17 at 22:27
that's why i have given the second option – Jitendra gupta May 08 '17 at 06:17
2

I know but that is wrong sadly.. Please see the documentation: Warning for Deep Clone For deep cloning, we need to use other alternatives because Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign – Playdome.io May 10 '17 at 04:59

Create deep copy in angular 2

2 Answers2