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:

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