AngularJs: Array push replaces other elements

Question

Used ng-repeat to populate data inside list.

HTML:-

<div ng-repeat="data in GCAList|filter:year" class="listGCA" ng-click="select()">
    <div class="listLibraryName">
        {{ data.LibraryName }}
    </div>
    <div class="listProjects">
        {{ data.Projects }}
    </div>
    <div class="listStatus">
        {{ data.Status }}
    </div>
    <div class="listYear">
        {{data.TaxYear}}
    </div>
</div>

Created a temporary variable and stored values in it from the form and then pushed it into the array. Now the problem while pushing is that, $$hashkey:"object:81" is generated automatically and for the next push again, same hashkey is generated and it replaces previously inserted data in the array. I used 'track by $index' in:

ng-repeat="data in GCAList|filter:year track by $index" Adding track by $index didn't help avoid replacing

The script file:

var app = angular.module("Accounts", ['restangular', 'ngDialog', 'ngAnimate'])
var temp = {
    "id": 0,
    "LibraryName": "" ,
    "Projects": 0,
    "Status": "",
    "TaxYear": 0
};

app.controller("accountsController", function($scope, ngDialog, RestRepository) {
    $scope.showEGCA = false;
    $scope.showGCA = true;
    $scope.name = "";
    RestRepository.getJson().then(function(response) {
        $scope.dataList = response;
        console.log($scope.dataList);
        $scope.GCAList = $scope.dataList[0];
        console.log($scope.GCAList);
        $scope.EGCAList = $scope.dataList[1];
        console.log($scope.EGCAList);
    });
    $scope.popOpen = function() {
        ngDialog.open({
            template: 'Pop Up.html',
            scope: $scope,
            controller: function($scope) {
                $scope.cancelCOA = function() {
                    ngDialog.close();
                };
                $scope.createGCA = function() {
                    temp.id = $scope.GCAList.length + 1;
                    temp.LibraryName = $scope.name;
                    temp.Projects = 2;
                    temp.Status = "Inactive";
                    temp.TaxYear = $scope.taxYear;
                    console.log(temp);
                    $scope.GCAList.push(temp);
                    console.log($scope.GCAList);
                    ngDialog.close();
                };
            },
            closeByDocument: false,
            closeByEscape: false,
            showClose: false,
        });
    };
    $scope.gcaOpen = function() {
        $scope.showGCA = !$scope.showGCA;
        $scope.showEGCA = true;
    };
    $scope.egcaOpen = function() {
        $scope.showEGCA = !$scope.showEGCA;
        $scope.showGCA = true;
    };
});

app.config(function(RestangularProvider) {
    RestangularProvider.setBaseUrl('http://10.198.50.19:98/jsonData/');
});

app.factory("RestRepository", [
    'Restangular', function(Restangular) {
        return {
            getJson: function() {
                return Restangular.one('jsonData.json').get();
            }
        }
    }
]);

temp must be a new object for every push: you are changing same object properties and adding the same instance to the array — fantarama
– fantarama, Commented Aug 4, 2016 at 7:19

Kishore L · Accepted Answer · 2016-08-04 07:32:07Z

The reason is, since you use the same object which is created above every time inside the function calls , you are getting same hashkey value and then adding same instance to the array. Remove,

   var temp ={
         "id":0,
        "LibraryName":"" ,
        "Projects":0,
        "Status":"",
        "TaxYear":0
      };

And place it inside your createGCA(). Your code will look like,

    $scope.createGCA = function () {
                 $scope.temp ={
             "id":0,
             "LibraryName":"" ,
             "Projects":0,
             "Status":"",
             "TaxYear":0
                     };
                $scope.temp.id=$scope.GCAList.length+1;
                $scope.temp.LibraryName=$scope.name;
                $scope.temp.Projects=2;
                $scope.temp.Status="Inactive";
                $scope.temp.TaxYear=$scope.taxYear;
                console.log($scope.temp);
                $scope.GCAList.push($scope.temp);
                console.log($scope.GCAList);
                ngDialog.close();
            };

Collectives™ on Stack Overflow

AngularJs: Array push replaces other elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest