In ngRepeat automatically including $$hashKey

Question

I have searched for a solution, I have tried all but I didn't find a solution.

In my code, I get an array from the database via ajax.

I am getting correct array, like this:

[{"id":"1","name":"product 1","image":null},{"id":"2","name":"product 2","image":null},{"id":"3","name":"product 3","image":null}];

but when I use it in ng-repeat it adds $$hashKey. Because of this, I am getting an error in my vendor.js file:

Uncaught TypeError: Cannot read property 'nodeName' of undefined

I have tried all

  angular.copy($scope.myArray);
  angular.toJson($scope.myArray);
  JSON.stringify($scope.myArray);

And I have also tried:

  <div ng-repeat="smallArray in myArray track by $id($index)">

This method removes that $$hashKey, but it returns as a string.

For example:

       $scope.ans = angular.toJson($scope.myArray);

is equal to

 $scope.ans = '[{"id":"1","name":"product 1","image":null},{"id":"2","name":"product 2","image":null},{"id":"3","name":"product 3","image":null}]';

this is my html

    <div class="slide-wrap" ng-repeat="smallArray in myArray">
        <div class="slide__content-wrap">
          <h1 class="title">{{smallArray.name}}</h1>
    </div>
    <div class="slide__content-wrap__inside show-for-large-up">
       <p class="description">{{smallArray.image}}</p>
         <a class="btn btn--transparent--red" href="/premium-ice-cream">view 
             all flavors</a>
    </div>
    </div>

Can anyone refer me how can I get an array with the removal of $$hashKey this

Answer 1

AngularJS adds a $$hashKey attribute to your objects to keep track of your changes if no track by isset inside your ng-repeat directive. Simply try to use ng-repeat="item in data track by item.id" and you will be fine. In that way AngularJS uses this "unique" value for its internal tracking.

View

<div ng-controller="MyCtrl">
   <div ng-repeat="item in data track by item.id">
       {{ item | json }}
   </div>
   <br />
   <div ng-repeat="item in hashData">
       {{ item | json }}
   </div>
   <br />
   <br />
   <button ng-click="track()">
    Click me to log
   </button>
</div>

AngularJS application

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

myApp.controller('MyCtrl', function($scope) {
  $scope.data = [{
    "id": "1",
    "name": "product 1",
    "image": null
  }, {
    "id": "2",
    "name": "product 2",
    "image": null
  }, {
    "id": "3",
    "name": "product 3",
    "image": null
  }];


  $scope.hashData = [{
    "id": "1",
    "name": "product 1",
    "image": null
  }, {
    "id": "2",
    "name": "product 2",
    "image": null
  }, {
    "id": "3",
    "name": "product 3",
    "image": null
  }];


  $scope.track = function () {
    console.log($scope.data);
    console.log($scope.hashData);
  }


});

> demo fiddle