從基於另一個json文件的json文件讀取數據的角度

Question

我是Angel的新手，並且遇到了一個我不知道設置此代碼的最佳方法的場景。

我有2個JSON文件：

images.json

{
    "imageName":        "example.jpg",
    "imageTags":        ["fun","work","utility"]
    "productID":        ["item1","item3"]
}

products.json

{
    "productID":        "item1",
    "productName":      "Staple Gun",
    "productURL":       "Staple-Gun.htm"
}

我還沒有任何代碼，我實際上是在嘗試確保首先正確構建此代碼。

我的目標是根據標簽提取圖像，因此我在第一個ng-repeat部分設置了過濾器。 這部分效果很好。 但我希望能夠鏈接到圖像中的產品。 我發現最簡單的方法是使用productID作為過濾器執行ng-repeat，但是如果我要拉50張照片並且每張照片有2個項目，那就是很多重復。 在我看來，這將需要大量資源。 這是最好的方法還是有更好的方法來處理呢？

代碼示例：

<div ng-repeat="photo in photos | filter: 'fun'">
   <img ng-src="{{ photo.imageName }}">
   <span>Products In This Image</span>
   <div ng-repeat="product in products | filter: photo.productID">
       <a ng-href="{{ product.productURL }}" title="{{ product.productName }}">{{ product.productName }}</a>
   </div>
</div>

Answer 1

將產品簡單映射到使用productID作為鍵的對象將更加有效

$scope.product_map = {};
products.forEach(function(item) {
  $scope.product_map[item.productID] = item
});

將產生：

{
  "item1": {
    "productID": "item1",
    "productName": "Staple Gun",
    "productURL": "Staple-Gun.htm"
  }
}

這意味着不必每次需要查找產品時都必須過濾整個數組，您只需執行以下操作：

var productNeeded = $scope.product_map['item1'];

在視圖中，這將轉換為：

<div ng-repeat="photo in photos | filter: 'fun'">
   <img ng-src="{{ photo.imageName }}">
   <span>Products In This Image</span>
    <!-- iterate small array of productID's in photo object -->
   <div ng-repeat="id in photo.productID">
       <!-- product_map[id] is a single object reference -->
       <a ng-href="{{ product_map[id].productURL }}" title="{{ product_map[id].productName }}">{{ product_map[id].productName }}</a>
   </div>
</div>