angularjs - copy common properties from one object to another

Question

I have a controller like this:

CheckoutController = function() {
    $scope.Profile = {
        firstname : 'Ruchir',
        middlename : 'Shakun',
        lastname : 'Gupta',
        email : '[email protected]',
        cellphone : '9876543210'
    }

    $scope.BillingDetails = {
        firstname : undefined,
        middlename : undefined,
        lastname : undefined,
        addressline : undefined,
        city : undefined,
        zipcode : undefined
    }

    $scope.update = function() {
        // I want to write some awesome code here as explained below
    }
}

Now, in the $scope.update function; I want to write something that should copy 'only common properties' i.e. firstname, middlename, and lastname from $scope.Profile to $scope.BillingDetails.

I tried angular.copy and angular.extend but,

• angular.extend merges $scope.BillingDetails and $scope.Profile. So I get email and cellphone properties in $scope.BillingDetails as well -- what I don't want.

• angular.copy overwrites $scope.BillingDetails and I lose addressline, city and zipcode from $scope.BillingDetails -- what I don't want.

What I want my update function to do is it should make $scope.BillingDetails equal to below object:

{
    firstname : 'Ruchir',
    middlename : 'Shakun',
    lastname : 'Gupta',
    addressline : undefined,
    city : undefined,
    zipcode : undefined    
}

This scenario is just an example. To shorten the length of my question, I have mentioned 5-6 properties only. In fact, I have to deal with more than 20 properties and all are dynamic. So it won't work for me by copying one-by-one properties firstname, middlename and lastname from Profile to BillingDetails. What can I do?

Solution 1

You may have luck with something like this:

$scope.update = function() {
  _update($scope.Profile, $scope.BillingDetails);
}

function _update(srcObj, destObj) {
  for (var key in destObj) {
    if(destObj.hasOwnProperty(key) && srcObj.hasOwnProperty(key)) {
      destObj[key] = srcObj[key];
    }
  }
}

plunker

Solution 2

Simple. Just assign them like this:

$scope.update = function() {
    $scope.BillingDetails.firstname = $scope.Profile.firstname;
    $scope.BillingDetails.middlename = $scope.Profile.middlename;
    $scope.BillingDetails.lastname = $scope.Profile.lastname;
}

I really can't think of a more straightforward method of copying a couple of properties from one object to another.

Since you need to copy more than 3 properties, you could try this:

$scope.update = function() {
    // Add the properties you want to copy to this array.
    var properties = ['firstname', 'middlename', 'lastname'];
    for(var i = 0; i < properties.length; i++){
         $scope.BillingDetails[properties[i]] = $scope.Profile[properties[i]];
    }
}

Or, pass the array as a parameter:

$scope.update = function(properties) {
    for(var i = 0; i < properties.length; i++){
         $scope.BillingDetails[properties[i]] = $scope.Profile[properties[i]];
    }
}

$scope.update(['firstname', 'middlename', 'lastname']);

Solution 3

In fact, you try to update BillingDetails with values of Profile, for properties they both have in common right?

If you can change the default values of BillingDetails with null instead of undefined, you can try this code:

$scope.BillingDetails = {
    firstname : null,
    middlename : null,
    lastname : null,
    addressline : null,
    city : null,
    zipcode : null
}

$scope.update = function() {
    for(var key in $scope.Profile) {
        if(typeof $scope.BillingDetails[key] !== 'undefined') {
            $scope.BillingDetails[key] = $scope.Profile[key];
        }
    }
}