angular2: how to copy object into another object

AngularTypescript

Angular Problem Overview


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.

Angular Solutions


Solution 1 - Angular

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))

Solution 2 - Angular

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))

Solution 3 - Angular

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.

Solution 4 - Angular

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

let copy = {...myObject};

Solution 5 - Angular

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);

Solution 6 - Angular

Try this.

Copy an Array :

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

Copy an object :

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

Solution 7 - Angular

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.

Solution 8 - Angular

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.

Solution 9 - Angular

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)})

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSwethaView Question on Stackoverflow
Solution 1 - AngularMikki KobvelView Answer on Stackoverflow
Solution 2 - AngularAnkit RaonkaView Answer on Stackoverflow
Solution 3 - AngularBogdanCView Answer on Stackoverflow
Solution 4 - AngularKabb5View Answer on Stackoverflow
Solution 5 - Angularrajesh kumarView Answer on Stackoverflow
Solution 6 - AngularSaifView Answer on Stackoverflow
Solution 7 - AngularSurajit DasView Answer on Stackoverflow
Solution 8 - AngularSurajit DasView Answer on Stackoverflow
Solution 9 - AngularDenis Alarie 4RPView Answer on Stackoverflow