What is the $$hashKey added to my JSON.stringify result

What is the $$hashKey added to my JSON.stringify result

I have tried looking on the Mozilla JSON stringify page of their docs as well as here on SO and Google but found no explanation. I have used JSOn stringify many time but never come across this result
I have an array of JSON objects
[
{
“param_2”: “Description 1”,
“param_0”: “Name 1”,
“param_1”: “VERSION 1”
},
{
“param_2”: “Description 2”,
“param_0”: “Name 2”,
“param_1”: “VERSION 2”
},
{
“param_2”: “Description 3”,
“param_0”: “Name 3”,
“param_1”: “VERSION 3”
}
]

attached to my $scope and in order to POST them as one paramater I used the JSON.stringify() method and I get the following:
[
{
“param_2”: “Description 1”,
“param_0”: “Name 1”,
“param_1”: “VERSION 1”,
“$$hashKey”: “005”
},
{
“param_2”: “Description 2”,
“param_0”: “Name 2”,
“param_1”: “VERSION 2”,
“$$hashKey”: “006”
},
{
“param_2”: “Description 3”,
“param_0”: “Name 3”,
“param_1”: “VERSION 3”,
“$$hashKey”: “007”
}
]

I am just curious what exactly is the $$hashkey as I expected something more similar to the following from the stringify method:
[
{
“1”:{
“param_2”: “Description 1”,
“param_0”: “Name 1”,
“param_1”: “VERSION 1”
},
“2”:{
“param_2”: “Description 2”,
“param_0”: “Name 2”,
“param_1”: “VERSION 2”
},
“3”:{
“param_2”: “Description 3”,
“param_0”: “Name 3”,
“param_1”: “VERSION 3”
}
}
]

I am not sure if it is a factor but I am using Angularjs 1.1.5, JQuery 1.8.2 and Spring 3.0.4 and Spring security 3.0.7 on the Server side
It is not causeing me any issues but I would like to know the cause and reason for the $$hashkey

Solutions/Answers:

Solution 1:

Angular adds this to keep track of your changes, so it knows when it needs to update the DOM.

If you use angular.toJson(obj) instead of JSON.stringify(obj) then Angular will strip out these internal-use values for you.

Also, if you change your repeat expression to use the track by {uniqueProperty} suffix, Angular won’t have to add $$hashKey at all. For example

<ul>
    <li ng-repeat="link in navLinks track by link.href">
        <a ng-href="link.href">{{link.title}}</a>
    </li>
</ul>

Just always remember you need the “link.” part of the expression – I always tend to forget that. Just track by href will surely not work.

Solution 2:

In my use case (feeding the resulting object to X2JS) the recommended approach

data = angular.toJson(source);

help to remove the $$hashKey properties, but the result could then no longer be processed by X2JS.

data = angular.copy(source);

removed the $$hashKey properties as well, but the result remained usable as a parameter for X2JS.

Solution 3:

It comes with the ng-repeat directive usually. To do dom manipulation AngularJS flags objects with special id.

This is common with Angular. For example if u get object with ngResource your object will embed all the resource API and you’ll see methods like $save, etc. With cookies too AngularJS will add a property __ngDebug.

Solution 4:

If you don’t want to add id’s to your data, you could track by the index in the array, which will cause the items to be keyed by their position in the array instead of their value.

Like this:

var myArray = [1,1,1,1,1];

<li ng-repeat="item in myArray track by $index">

Solution 5:

If you are using Angular 1.3 or above, I recommend that you use “track by” in your ng-repeat. Angular doesn’t add a “$$hashKey” property to the objects in your array if you use “track by”. You also get performance benefits, if something in your array changes, angular doesn’t recreate the entire DOM structure for your ng-repeat, it instead recreates the part of the DOM for the values in your array that have changed.

Solution 6:

Update : From Angular v1.5, track by $index is now the standard syntax instead of using link as it gave me a ng-repeat dupes error.

I ran into this for a nested ng-repeat and the below worked.

<tbody>
    <tr ng-repeat="row in data track by $index">
    <td ng-repeat="field in headers track by $index">{{row[field.caption] }}</td>
</tr>