AngularJSのカスタムフィルター機能で「キーが定義されていません」

Question

Angular JSの書籍の中で、私がよく理解していないものがありました。それはカスタムフィルタとng-repeatと関係があります。コードはこちら

<a ng-click="selectCategory()" class="btn btn-block btn-default btn-lg"> 
    Home 
</a> 
<a ng-repeat="item in data.products | orderBy: 'category' | unique: 'category'" ng-click="selectCategory(item)" class="btn btn-block btn-default btn-lg"> 
    {{item}} 
</a> 

次のコードは、html bodyタグに付加されたコントローラです。

angular.module("sportsStore").controller("sportsStoreCtrl", function ($scope) { 
$scope.data = { 
    products: [ 
     { 
      name: "Product #1", 
      description: "A product", 
      category: "Category #1", 
      price: 100 
     }, 
     { 
      name: "Product #2", 
      description: "A product", 
      category: "Category #1", 
      price: 100 
     }, 
     { 
      name: "Product #3", 
      description: "A product", 
      category: "Category #2", 
      price: 210 
     }, 
     { 
      name: "Product #4", 
      description: "A product", 
      category: "Category #3", 
      price: 202 
     } 
    ] 
}; 

}）;

カスタムフィルタのコードは、カスタムフィルタは基本的に$のscope.data.productsのカテゴリのリストを作成されて行うことになっている何

angular.module("customFilters", []).filter("unique", function() { 
    return function (data, propertyName) { 
     if (angular.isArray(data) && angular.isString(propertyName)) { 
      var results = []; 
      var keys = {}; 
      for (var i = 0; i < data.length; i++) { 
       var val = data[i][propertyName]; 
       if (angular.isUndefined(keys[val])) { 
        keys[val] = true; 
        results.push(val); 
       } 
      } 
      return results; 
     } else { 
      return data; 
     } 
    } 
}); 

です。

コードは正常に動作しています。私が理解できないことは、 "var keys = {};"が果たす役割ですカスタムフィルター機能で使用できます。

可変 "キー"を持ち、プロパティの値をtrueに設定する意図は何ですか？

Answer 1

フィルタは、$ scope.dataおよびプロパティ "category"によって提供されるデータに対して実行されます。一意のカテゴリをチェックし、カテゴリの最初のインスタンスのみを表示します。

ループが実行されると、データの各インデックスの「カテゴリ」キーの値が読み取られます。

keysオブジェクトは、結果配列にどのような値が追加されたかを追跡するためのトラッカーとして機能します。

キーオブジェクトに値を設定すると、その値に再び遭遇すると、if条件を満たすことができず、結果配列に追加されません。

つまり、Product＃1で実行され、Category＃1としてカテゴリが読み込まれ、results配列に追加され、キー["Category＃1"]の値がtrueに作成されます。
次に、Product＃2では、Category＃1のカテゴリ値が抽出されます。カテゴリ＃1は既にキーオブジェクト上にあるため、結果にProduct＃2は追加されません。
次に、Product＃3は、Category＃2のカテゴリ値を抽出し、キーオブジェクトにないことを確認して、結果に「Category＃2」を追加します。

私が間違っていない場合は、結果のディスプレイはProduct＃1、＃3、および＃4の情報になります。

キー[val] = trueを削除すると、すべての商品が表示されます。