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

Question

我是新來的角，並遇到了我不知道設置此代碼的最佳方式的場景。

我有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" 
    } 
} 

這意味着每次您需要廁所時，不必過濾整個數組k上一產品，你可以簡單地做：

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>