angular2: how to copy object into another object
AngularTypescriptAngular 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)})