$$ hashKey, JSON.stringify sonucuma eklendi


289

Ben onların dokümanlarının yanı sıra SO ve Google Mozilla JSON stringify sayfasına bakmaya çalıştım ama hiçbir açıklama bulunamadı. JSOn birçok kez stringify kullandım ama bu sonuca asla rastlamadım

JSON nesneleri dizim var

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

benim bağlı $scopeve POSTonlara bir parametre olarak sırayla JSON.stringify () yöntemini kullandım ve aşağıdakileri elde:

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

Ben sadece stringify yönteminden aşağıdakine benzer bir şey beklediğim gibi tam olarak $$ hashkey nedir merak ediyorum:

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

Bunun bir faktör olup olmadığından emin değilim ama kullanıyorum Angularjs 1.1.5, JQuery 1.8.2 and Spring 3.0.4 and Spring security 3.0.7 on the Server side

Bana herhangi bir soruna neden olmuyor ama bunun nedenini ve nedenini bilmek istiyorum $$hashkey


8
angularjs
Arun P Johny


69
JSON.stringify yerine angular.toJson ()
Arun P Johny

Teşekkürler çocuklar, herhangi biri açıklamanızı bir cevap olarak eklemek isterse kabul etmekten mutluluk
duyarım

1
Bu cevap harika bir açıklama .. stackoverflow.com/questions/12336897/…
Charlie Martin

Yanıtlar:


531

Açısal, değişikliklerinizi takip etmek için bunu ekler, böylece DOM'u ne zaman güncellemesi gerektiğini bilir.

Eğer kullanırsanız angular.toJson(obj)yerine JSON.stringify(obj)o Eğik sizin için bu iç kullanım değerlerini çıkarmaz.

Ayrıca, track by {uniqueProperty}son ifadeyi kullanmak için yinelenen ifadenizi değiştirirseniz , Angular eklemeniz gerekmez $$hashKey. Örneğin

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

Her zaman "bağlantıya" ihtiyacınız olduğunu unutmayın. ifadesinin bir parçası - Bunu her zaman unutmaya meyilliyim. Sadece track by hrefkesinlikle çalışmaz.


«Track by» vs «$$ hashKey» ile ilgili performans testleri var mı? (UPD. Tamam, googled ve «track by» daha fazla tercih edilir)
artuska

@artuska id ile izleme çok basittir, çünkü hiçbir karma hesaplanmaya gerek yok, sadece mevcut kimlikleri yeniden kullanıyorsunuz veya bir sayacı artırıyorsunuz ...
Christophe Roussy

3
ve uygulayacağınız bir filtreniz varsa, işte doğru sıra: item in somelist | filter:somefilter track by item.keyfiltreyi satırın sonuna yazmayın!
Lewen

1
Not! Daha sonra bir ng-yineleme ile render bir dizi içine öğeleri ekledi kopyalanan bir klon yöntemi ile bir dizi kullanıyordum. Öğemi klonlamak için JSON.parse (JSON.stringify (obj)) kullanırken açısal 'yinelenen anahtar' hataları alıyordum. JSON.parse (angular.toJson (obj)) kullanma; sabit şeyler. Teşekkürler!
SAL

1
Yalnızca veri görüntülüyorsanız güncellenmesini önlemek için, çift kolon :: kullanarak Tek Seferde Bağlama özelliğini de kullanabilirsiniz. <a ng-href="link.href"> {{:: link.title}} </a>
phil

70

Kullanım durumumda (ortaya çıkan nesneyi X2JS'ye besleme) önerilen yaklaşım

data = angular.toJson(source);

$$hashKeyözellikleri kaldırmaya yardımcı olur , ancak sonuç artık X2JS tarafından işlenemez .

data = angular.copy(source);

$$hashKeyözellikleri de kaldırdı , ancak sonuç X2JS için bir parametre olarak kullanılabilir kaldı.


37

Genellikle ng-tekrar yönergesi ile birlikte gelir. Dom manipülasyonu yapmak için AngularJS, nesneleri özel id ile işaretler.

Bu Açısal ile ortaktır. Örneğin, uResResource ile nesne alırsanız, nesneniz tüm kaynak API'sını gömer ve $ save gibi yöntemler görürsünüz. Çerezlerle de AngularJS __ngDebug özelliği ekleyecektir.


bu özellikleri nasıl kaldırmalıyım? Açısal bunu yapmak için herhangi bir yol sağlıyor mu?
Nilesh

1
Bu özelliği kaldırmaya çalışırsanız açısal modeller bozulur, değişkeni kopyalamanızı öneririm. @ David-Boike'ın hashkey'i nasıl filtreleyeceğine dair cevabı
Josue Alexander Ibarra

23

Verilerinize kimlik eklemek istemezseniz, dizideki dizine göre izleme yapabilirsiniz; bu, öğelerin değerleri yerine dizideki konumlarına göre anahtarlanmasına neden olur.

Bunun gibi:

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

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

Bu, öğelerinizin siparişinin asla değişmeyeceği varsayımını gerektirir. :)
neatcoding

8

Angular 1.3 veya daha üstünü kullanıyorsanız, ng tekrarınızda "takip etme" özelliğini kullanmanızı öneririz. "Takip ölçütü" kullanırsanız, açısal, dizinizdeki nesnelere "$$ hashKey" özelliği eklemez. Ayrıca, performans avantajlarından da yararlanırsınız, dizinizdeki bir şey değişirse açısal, ng yinelemeniz için tüm DOM yapısını yeniden oluşturmaz, bunun yerine dizinizdeki değişen değerler için DOM'nin bölümünü yeniden oluşturur.


4

Güncelleme: Angular v1.5'ten itibaren track by $index, bana bir ng-repeatdupes hatası verdiğinden bağlantı kullanmak yerine standart sözdizimidir .

İç içe geçmişler için bununla karşılaştım ng-repeatve aşağıdakiler işe yaradı.

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

Sadece açıklığa kavuşturmak için - ifadeyle izlemede kullanılan öznitelik, tekrarlanan koleksiyonda benzersiz olmalıdır. $ endeksi bir seçenektir. Çoğu durumda yeterlidir, ancak bazen benzersiz özelliğe göre izlemek yararlı olabilir. (İd, ...)
Martin Hlavňa

Bu, öğelerinizin siparişinin asla değişmeyeceği varsayımını gerektirir. :)
neatcoding

3

$$ hashKey öğesini nesneden kolayca nasıl kaldırabileceğiniz aşağıda açıklanmıştır:

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

$scope.myObject - İşlemi gerçekleştirmek istediğiniz Nesneyi ifade eder, yani $$ hashKey öğesini

$scope.myNewObject - Değiştirilen orijinal nesneyi yeni nesneye gerektiği gibi kullanılabilmesi için atayın


Bunu gereksiz yere karmaşık buluyorum. Bu tek alanı veya $ ile başlayan her alanı kaldırabilirsiniz. Ama muhtemelen diğer cevapları görmek zorunda değilsiniz.
sevcsik

1

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

Açısal, insanlar ilk kez gördüğünde oldukça büyülü. JS'nizdeki bir değişkeni güncellediğinizde otomatik DOM güncelleştirmeleri ve birisi DOM'deki değerini güncellediğinde aynı değişken JS dosyanızda güncellenir. Aynı işlev sayfa öğelerinde ve denetleyicilerde de çalışır.

Tüm bunların anahtarı $$ hashKey Angular ng tekrarlarında kullanılan nesnelere ve dizilere bağlanır.

Bu $$ hashKey, ekstra veri şeritlemeyen bir API'ya tam nesne gönderen kişiler için çok karışıklığa neden olur. API, tüm istekleriniz için 400 döndürür, ancak $$ hashKey nesnelerinizden uzaklaşmaz.

Açısal, DOM'daki hangi öğelerin bir dizideki ng-tekrarında döngü içinde olan öğeye ait olduğunu izlemek için $$ hashKey öğesini kullanır. $$ hashKey Angular olmadan, JavaScript veya DOM'da meydana gelen değişiklikleri Angular'ın ana kullanımlarından biri olan muadillerine uygulamak için bir yol olmazdı.

Şu diziyi düşünün:

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

Bunu ng-repeat = "kullanıcılarda kullanıcı" kullanarak bir listeye dönüştürürsek, içindeki her nesne Angular'dan izleme amacıyla bir $$ hashKey alır. İşte bu $$ hashKey önlemek için iki yol.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.