CODEWITHSUNDEEP
javascriptangularjs
Adelin
Adelin

Reputation: 18971

Deep copying objects in angular?

I wonder if there is away to avoid copying references to objects when you need to create a simple object which has an array of embedded objects.The situation is as follow: I have server which accepts a JSON and applies some logic then stores the object in DB. lets say my form is for saving teams in DB. The server accepts team as json. the team has an array of TeamMember objects, my form has a simple field to enter team member info and add it to team teamMembers array. Now here is the problem, when I add a team member to array list and want to add another team member when I type into the field the added member is changed also !. I know the reason 

$scope.addTeamMember=function(teamMember){
   $scope.team.teamMembers.push(teamMember);
}

and it is because I put same reference into the teamMembers array so I have same object added several times. to avoid this I should create a new team member object, copy all teamMember properties and and add it the array. 

 $scope.addTeamMember=function(teamMember){
       var newTeamMember; /*<--- copy teamMember */
       $scope.team.teamMembers.push(newTeamMember); /*and add newTeamMember*/
    }

Upvotes: 51

Views: 100325

Answers (3)

Noman Chali
Noman Chali

Reputation: 330

I personally use this: 

    function copyObjToObj(source, destination) {
        if(!angular.equals(source,destination)){
            if (!!destination) 
                angular.copy(source, destination);
            else 
                destination = angular.copy(source);
        }
        return destination;
    }
var destination = copyObjToObj(sourceObj, destination);

Upvotes: 0

anandharshan
anandharshan

Reputation: 6342

This is the best documentation available

https://docs.angularjs.org/api/ng/function/angular.copy

there is a live example as well on the page which is self illustrative.

Upvotes: 6

Ben Lesh
Ben Lesh

Reputation: 108491

Your question says you want to "avoid deep copy", but I'm not sure that's accurate. It sounds like you just want to use angular.copy, because you need to create a copy of the team member and add that to the array:

$scope.addTeamMember = function(teamMember) {
   var newTeamMember = angular.copy(teamMember);
   $scope.team.teamMembers.push(newTeamMember);
};

Upvotes: 116

Related Questions