angular2: how to copy object into another object

Question

Please help me in order to copy the object into another object using angular 2?

In angular, I used angular.copy() to copy objects to the loose reference of the old objects. But, when I used the same in angular 2 getting below error:

Error: angular is not defined.

Possible duplicate of [How can I use angular.copy in angular 2](https://stackoverflow.com/questions/34688517/how-can-i-use-angular-copy-in-angular-2) — sisve, Nov 30 '17 at 07:30

score 190 · Accepted Answer · edited Sep 08 '22 at 07:21

190

Solution

Angular2 developed on the ground of modern technologies like TypeScript and ES6.

So you can just do let copy = Object.assign({}, myObject).

Object assign - nice examples.

For nested objects : let copy = JSON.parse(JSON.stringify(myObject))

edited Sep 08 '22 at 07:21

jakubde

31
1
2
4

answered Sep 15 '16 at 08:45

Kanso Code

7,479
5
34
49

6

this won't work for nested objects. How can we deep copy nested objects? – Pratap A.K Apr 03 '17 at 09:40
4

This would copy an object by reference. What if I do want to copy by reference, so as to avoid any changes in myObject affecting 'copy' object. – Manoj Amalraj May 08 '17 at 19:57
@PratapA.K Take a look at loadsh, if you can load another library in your system. It has functions such as _cloneDeep. – PeterS May 08 '17 at 20:19
'Object' only refers to a type, but is being used as a namespace here.ts(2702) – Omid Farvid Jun 13 '19 at 23:36

Ankit Raonka · Answer 2 · 2021-06-28T14:35:08.967

60

let copy = Object.assign({}, myObject).  as mentioned above

but this wont work for nested objects. So an alternative would be

let copy =JSON.parse(JSON.stringify(myObject))

edited Jun 28 '21 at 14:35

answered May 26 '17 at 10:49

Ankit Raonka

6,429
10
35
54

1

worked for me when nested objects are there, Thank you – Swift Nov 23 '18 at 10:55

score 14 · Answer 3 · answered Jan 15 '18 at 15:42

As suggested before, the clean way of deep copying objects having nested objects inside is by using lodash's cloneDeep method.

For Angular, you can do it like this:

Install lodash with yarn add lodash or npm install lodash.

In your component, import cloneDeep and use it:

import * as cloneDeep from 'lodash/cloneDeep';
...
clonedObject = cloneDeep(originalObject);

It's only 18kb added to your build, well worth for the benefits.

I've also written an article here, if you need more insight on why using lodash's cloneDeep.

That works for me! Thank you :) It seems incredible that high level programming language cannot deal with a "copy" without reference... — Nebuchanazer, Mar 26 '20 at 19:01

score 11 · Answer 4 · answered Aug 22 '18 at 15:13

11

You can do in this in Angular with ECMAScript6 by using the spread operator:

let copy = {...myObject};

answered Aug 22 '18 at 15:13

Kabb5

3,760
2
33
55

13

Downvoted because copy will hold a reference to the old object. – CrazySabbath Mar 08 '19 at 10:26

score 5 · Answer 5 · answered Nov 30 '17 at 07:19

let course = {
  name: 'Angular',
};

let newCourse= Object.assign({}, course);

newCourse.name= 'React';

console.log(course.name); // writes Angular
console.log(newCourse.name); // writes React

For Nested Object we can use of 3rd party libraries, for deep copying objects. In case of lodash, use _.cloneDeep()

let newCourse= _.cloneDeep(course);

score 4 · Answer 6 · answered Jun 30 '19 at 10:04

4

Try this.

Copy an Array :

const myCopiedArray  = Object.assign([], myArray);

Copy an object :

const myCopiedObject = Object.assign({}, myObject);

answered Jun 30 '19 at 10:04

Saif

394
3
13

score 2 · Answer 7 · answered Nov 20 '18 at 18:30

2

Loadsh is the universal standard library for coping any object deepcopy. It's a recursive algorithm. It's check everything and does copy for the given object. Writing this kind of algorithm will take longer time. It's better to leverage the same.

answered Nov 20 '18 at 18:30

Surajit Das

61
5

score 2 · Answer 8 · edited Jul 18 '19 at 12:15

2

Object.assign will only work in single level of object reference.

To do a copy in any depth use as below:

let x = {'a':'a','b':{'c':'c'}};
let y = JSON.parse(JSON.stringify(x));

If want to use any library instead then go with the loadash.js library.

edited Jul 18 '19 at 12:15

Mike Poole

1,958
5
29
41

answered Jul 18 '19 at 11:06

Surajit Das

61
5

score 1 · Answer 9 · answered Aug 08 '22 at 08:31

1

You can now do deep copy without any external library as below:

let originalObj = {'a':'a','b':{'c':'c'}};
let copyObj = structuredClone(originalObj);

Complete Reference MDN

answered Aug 08 '22 at 08:31

Surajit Das

61
5

score 0 · Answer 10 · answered Jan 29 '22 at 02:26

thank you Saif from above. I tried his suggestion and it worked like a charm after I tried for three days to get my code to work.

  this.sElectionFinal.subscribe((election) => {
 const electionCopy = Object.assign({},election)
  this.electionsFinal.push(electionCopy)})

angular2: how to copy object into another object

10 Answers10

Linked