내 JSON에 추가 된 $$ hashKey는 무엇입니까?


289

나는 찾고 시도 모질라 JSON 캐릭터 라인 화 등 여기 SO Google에서뿐만 아니라 그 문서의 페이지하지만 설명을 찾을 수 없습니다. JSOn stringify를 여러 번 사용했지만이 결과를 보지 못했습니다.

JSON 객체 배열이 있습니다.

[
    {
        "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"
    }
]

내 부착 $scope및하기 위해 POST하나의 paramater 내가 JSON.stringify () 메소드를 사용하고 난 다음을 얻을로 :

   [
        {
            "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"
        }
    ]

stringify 메소드에서 다음과 비슷한 것을 기대하면서 정확히 $$ hashkey가 무엇인지 궁금합니다.

[
    {
        "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"
        }
    }
]

그것이 요인인지 확실하지 않지만 사용하고 있습니다. Angularjs 1.1.5, JQuery 1.8.2 and Spring 3.0.4 and Spring security 3.0.7 on the Server side

그것은 나에게 문제를 일으키지 않지만 나는 그 원인과 이유를 알고 싶습니다. $$hashkey


8
그것은 AngularJS와 추가된다
룬 Johny는 P를


69
대신 JSON.stringify 사용의 angular.toJson ()
아룬 P Johny는

고맙습니다 얘들 아, 만약 당신이 답으로 당신의 설명을 추가하고 싶다면 내가 기꺼이 받아 들일 것입니다
jonnie

1
이 답변은 훌륭한 설명입니다 .. stackoverflow.com/questions/12336897/…
Charlie Martin

답변:


531

Angular는 변경 사항을 추적하기 위해 이것을 추가하므로 DOM을 업데이트해야 할 시점을 알 수 있습니다.

angular.toJson(obj)대신에 JSON.stringify(obj)Angular 를 사용 하면 이러한 내부 사용 값이 제거됩니다.

또한 track by {uniqueProperty}접미사 를 사용하도록 반복 표현식을 변경하면 Angular는 전혀 추가 할 필요가 없습니다 $$hashKey. 예를 들어

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

항상 "링크"가 필요하다는 것을 기억하십시오. 표현의 일부-나는 항상 그것을 잊는 경향이 있습니다. 그냥 track by href확실하게 작동하지 않습니다.


«track by»vs«$$ hashKey»에 대한 성능 테스트가 있습니까? (UPD. 좋아, 나는 그것을 구글 검색했고«track by»가 더 바람직하다)
artuska

해시를 계산할 필요가 없으므로 ID로 @artuska 추적은 매우 간단합니다. 기존 ID를 재사용하거나 카운터를 증가시킬뿐입니다 ...
Christophe Roussy

3
적용 할 필터가있는 경우 올바른 순서는 다음 item in somelist | filter:somefilter track by item.key과 같습니다. , 줄 끝에 필터를 쓰지 마십시오!
Lewen

1
노트! 복제 방법으로 배열을 사용하여 배열에 요소를 복사 한 다음 삽입하여 ng-repeat로 렌더링했습니다. JSON.parse (JSON.stringify (obj))를 사용하여 요소를 복제 할 때 각도 '중복 키'오류가 발생했습니다. JSON.parse (angular.toJson (obj)) 사용; 고정 된 것들. 감사!
SAL

1
이중 콜론 ::을 사용하여 일회용 바인딩 기능을 사용하여 데이터 만 표시하는 경우 업데이트되지 않도록 할 수도 있습니다. <a ng-href="link.href"> {{:: link.title}} </a>
phil

70

유스 케이스 (결과 객체를 X2JS에 공급)에서 권장되는 접근법

data = angular.toJson(source);

$$hashKey속성 을 제거하는 데 도움이 되지만 결과는 더 이상 X2JS에서 처리 할 수 ​​없습니다 .

data = angular.copy(source);

$$hashKey속성도 제거 되었지만 결과는 X2JS의 매개 변수로 사용할 수 있습니다.


37

일반적으로 ng-repeat 지시문과 함께 제공됩니다. 돔 조작하기 AngularJS는 특별한 id를 가진 객체를 플래그합니다.

이것은 Angular와 공통입니다. 예를 들어 ngResource를 사용하여 객체를 얻는 경우 객체에 모든 리소스 API가 포함되며 $ save 등의 메서드가 표시됩니다. 쿠키를 사용하면 AngularJS가 __ngDebug 속성을 추가합니다.


이러한 속성을 어떻게 제거해야합니까? 각도가 그렇게 할 수있는 방법을 제공합니까?
Nilesh

1
해당 속성을 제거하려고하면 각도 모델이 손상됩니다. 변수를 복사하는 것이 좋습니다. 해시 키를 걸러내는 방법에 대한 @ David-Boike의 답변을보십시오
Josue Alexander Ibarra

23

데이터에 id를 추가하지 않으려는 경우 배열의 인덱스를 추적하여 값 대신 배열의 위치에 따라 항목을 키 지정할 수 있습니다.

이처럼 :

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

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

아이템의 순서가 절대 바뀌지 않을 것이라는 가정이 필요합니다. :)
neatcoding

8

Angular 1.3 이상을 사용하는 경우 ng-repeat에서 "track by"를 사용하는 것이 좋습니다. "track by"를 사용하는 경우 Angular는 배열의 객체에 "$$ hashKey"속성을 추가하지 않습니다. 배열의 무언가가 변경되면 angular는 ng-repeat에 대한 전체 DOM 구조를 다시 만들지 않고 대신 배열의 값에 대해 DOM의 일부를 다시 만듭니다.


4

업데이트 : Angular v1.5에서 track by $index가 링크를 사용하는 대신 표준 구문으로 사용되어 ng-repeat듀피 오류가 발생했습니다.

나는 이것을 중첩으로 보았고 ng-repeat아래는 효과가있었습니다.

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

명확히하기 위해-트랙 별 표현식에 사용 된 속성은 반복 된 컬렉션에서 고유해야합니다. $ index는 하나의 옵션입니다. 대부분의 경우 충분하지만 때로는 고유 한 속성으로 추적하는 것이 유용 할 수도 있습니다. (id, ...)
Martin Hlavňa

아이템의 순서가 절대 바뀌지 않을 것이라는 가정이 필요합니다. :)
neatcoding

3

다음은 객체에서 $$ hashKey를 쉽게 제거하는 방법입니다.

$scope.myNewObject = JSON.parse(angular.toJson($scope.myObject))

$scope.myObject -$$ hashKey를 제거 할 때 작업을 수행하려는 객체를 나타냅니다.

$scope.myNewObject -수정 된 원본 객체를 새 객체에 할당하여 필요에 따라 사용할 수 있도록합니다.


나는 이것이 불필요하게 복잡하다는 것을 안다. 단일 필드 또는 $로 시작하는 모든 필드를 제거 할 수 있습니다. 그러나 아마도 당신은 필요하지 않을 것입니다-다른 답변을보십시오.
sevcsik

1

https://www.timcosta.io/angular-js-object-comparisons/

Angular는 사람들이 처음 볼 때 매우 마술입니다. JS에서 변수를 업데이트하면 자동 DOM이 업데이트되며 누군가 DOM에서 값을 업데이트하면 동일한 변수가 JS 파일에서 업데이트됩니다. 이 기능은 페이지 요소와 컨트롤러에서 작동합니다.

이 모든 것의 핵심은 $$ hashKey Angular가 ng-repeats에 사용되는 객체와 배열에 연결되는 것입니다.

이 $$ hashKey는 추가 데이터를 제거하지 않는 API로 전체 오브젝트를 보내는 사람들에게 많은 혼란을 야기합니다. API는 모든 요청에 ​​대해 400을 반환하지만 $$ hashKey는 객체에서 멀어지지 않습니다.

Angular는 $$ hashKey를 사용하여 DOM의 어떤 요소가 ng-repeat에서 반복되는 배열의 어떤 항목에 속하는지 추적합니다. $$ hashKey Angular가 없으면 JavaScript 또는 DOM에서 발생하는 변경 사항을 Angular의 주요 용도 중 하나 인 해당 항목에 적용 할 방법이 없습니다.

이 배열을 고려하십시오.

users = [  
    {
         first_name: "Tim"
         last_name: "Costa"
         email: "tjsail33@gmail.com"
    }
]

ng-repeat = "user in users"를 사용하여 목록으로 렌더링하면, 각 객체는 Angular로부터 추적 목적으로 $$ hashKey를받습니다. 이 $$ hashKey를 피하는 두 가지 방법이 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.