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.
This question is related to
angular
typescript
Try this.
Copy an Array :
const myCopiedArray = Object.assign([], myArray);
Copy an object :
const myCopiedObject = Object.assign({}, myObject);
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.
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.
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);
You can do in this in Angular with ECMAScript6 by using the spread operator:
let copy = {...myObject};
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))
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.
Source: Stackoverflow.com