Angular Reading Data From A Json File Based On Another Json File

I'm new to angular and have run into a scenario where I don't know the best way to setup this code. I have 2 JSON files: images.json { 'imageName': 'example.jpg', '

Solution 1:

A simple mapping of the products to an object that uses the productID as keys would be much more efficient

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

Will produce:

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

This means instead of having to filter a whole array each time you need to look up a product you can simply do:

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

In the view this would translate to:

<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>