Angular 基于另一个 json 文件从 json 文件中读取数据

Question

我是 angular 的新手，运行遇到了一个我不知道设置此代码的最佳方法的场景。

我有 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 部分放了一个过滤器。这部分效果很好。但我希望能够 link 到图像中的产品。我发现最简单的事情是使用 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>

Angular 基于另一个 json 文件从 json 文件中读取数据

Angular reading data from a json file based on another json file

javascript

json

angularjs

ng-repeat