HTML

<div ng-controller="MyCtrl">
  this is 'a' array
<br>
  <div ng-repeat ="element in a">
      {{element.value}}
  </div>
<br>
   this is 'b' array
<br>
  <div ng-repeat ="element in b">
      {{element.value}}
  </div>
<br>
  this is final array 
<br>
   <div ng-repeat ="element in final_array">
      {{element.value}}
  </div>
</div>'

js controller

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

    $scope.a = [{
        "id": 1,
        "value": 10
    }, {
        "id": 2,
        "value": 20
    }]
    $scope.b = [{
        "id": 1,
        "value": 20
    }, {
        "id": 3,
        "value": 40
    }]
    var c = [];
    c = $scope.a.concat($scope.b)
    console.log(c)
    $scope.final_array = [];
    for (var i = 0; i < c.length; i++) {
        if ($scope.final_array.length == 0) {
            $scope.final_array.push(c[i]);

        } else {
            alert("hi")
            for (var j = 0; j < $scope.final_array.length; j++) {
                $scope.flag = 0;
                if ($scope.final_array[j].id == c[i].id) {
                    $scope.final_array[j].value = parseFloat($scope.final_array[j].value) + parseFloat(c[i].value);
                    $scope.flag = 0;
                    break;
                } else {
                    $scope.flag = 1;
                }
            }
            if ($scope.flag == 1) {
                $scope.final_array.push(c[i]);
            }
        }
    }
    console.log($scope.a)
    console.log($scope.b)

    console.log($scope.final_array)
}

I am concatenating two arrays a & b and if the value of key id is the same, I update the value. but y does it update the value of a array when I am updating on a merged array $scope.final array.

here is the fiddle JS Fiddle Demo

HTML

<div ng-controller="MyCtrl">
  this is 'a' array
<br>
  <div ng-repeat ="element in a">
      {{element.value}}
  </div>
<br>
   this is 'b' array
<br>
  <div ng-repeat ="element in b">
      {{element.value}}
  </div>
<br>
  this is final array 
<br>
   <div ng-repeat ="element in final_array">
      {{element.value}}
  </div>
</div>'

js controller

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

    $scope.a = [{
        "id": 1,
        "value": 10
    }, {
        "id": 2,
        "value": 20
    }]
    $scope.b = [{
        "id": 1,
        "value": 20
    }, {
        "id": 3,
        "value": 40
    }]
    var c = [];
    c = $scope.a.concat($scope.b)
    console.log(c)
    $scope.final_array = [];
    for (var i = 0; i < c.length; i++) {
        if ($scope.final_array.length == 0) {
            $scope.final_array.push(c[i]);

        } else {
            alert("hi")
            for (var j = 0; j < $scope.final_array.length; j++) {
                $scope.flag = 0;
                if ($scope.final_array[j].id == c[i].id) {
                    $scope.final_array[j].value = parseFloat($scope.final_array[j].value) + parseFloat(c[i].value);
                    $scope.flag = 0;
                    break;
                } else {
                    $scope.flag = 1;
                }
            }
            if ($scope.flag == 1) {
                $scope.final_array.push(c[i]);
            }
        }
    }
    console.log($scope.a)
    console.log($scope.b)

    console.log($scope.final_array)
}

I am concatenating two arrays a & b and if the value of key id is the same, I update the value. but y does it update the value of a array when I am updating on a merged array $scope.final array.

here is the fiddle JS Fiddle Demo

• javascript
• html
• arrays
• angularjs

1 Answer 1

Because both the arrays refers to the same object, so when the object is updated both arrays will have the updated value.

You can make a copy of the original object when you copy the value to the final array to fix it

$scope.final_array.push(angular.copy(c[i]));

You can simplify the calculation logic like

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.a = [{
    "id": 1,
    "value": 10
  }, {
    "id": 2,
    "value": 20
  }]
  $scope.b = [{
    "id": 1,
    "value": 20
  }, {
    "id": 3,
    "value": 40
  }]

  var c = $scope.a.concat($scope.b),
    map = {};

  $scope.final_array = [];
  c.forEach(function(item) {
    if (!map[item.id]) {
      map[item.id] = angular.copy(item);
      $scope.final_array.push(map[item.id]);
    } else {
      map[item.id].value += +item.value;
    }
  });
})

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <pre>{{a}}</pre>
    <pre>{{b}}</pre>
    <pre>{{final_array}}</pre>
  </div>
</div>