从JSON文件基于另一个JSON文件角读取数据

问题描述

我是新的角度和遇到了这样一个场景，我不知道设置的最佳方式本code。

我有2个JSON文件：

images.json

  {
    imageName：example.jpg，
    imageTags：好玩，工作，实用]
    的productID：ITEM1，项目3]
}
 

products.json

  {
    的productID：ITEM1
    产品名称：主食枪
    PRODUCTURL：装订-Gun.htm
}
 

我没有任何code呢，我真的想要确保我建立这个正确的第一位。

我的目标是拉基于标签的图像，所以我把一个过滤器上的第一个NG重复部分。这部分工作得很好。但我希望能够链接到的图像中的产品。我发现的最简单的事情是做NG-重复使用产品ID作为过滤器，但如果我拉50张照片和每张照片有2项，即一吨重复。在我看来，这将需要大量的资源。这是最好的方法还是有更好的方式来处理这个问题？

code例如：

 ＆LT; D​​IV NG重复=照片照片|过滤器：'好玩'＆GT;
   ＆LT; IMG NG-SRC ={{photo.imageName}}＆GT;
   ＆LT;跨度＆GT;产品在这个图片＆LT; / SPAN＆GT;
   ＆LT; D​​IV NG重复=产品在产品|过滤器：photo.productID＆GT;
       ＆下;一个纳克-HREF ={{product.productURL}}标题={{product.productName}}＆GT; {{product.productName}}＆下; / A＆GT;
   ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

产品到使用对象的简单映射的productID 作为键会更有效

  $ scope.product_map = {};
products.forEach（函数（项目）{
  $ scope.product_map [item.productID] =项目
}）;
 

会产生：

  {
  ITEM1：{
    的productID：ITEM1
    产品名称：主食枪
    PRODUCTURL：装订-Gun.htm
  }
}
 

这意味着，而不必每次你需要仰视你可以简单地做一个产品的时候来筛选整个数组：

  VAR productNeeded = $ scope.product_map ['ITEM1'];
 

在这个视图将转换为：

 ＆LT; D​​IV NG重复=照片照片|过滤器：'好玩'＆GT;
   ＆LT; IMG NG-SRC ={{photo.imageName}}＆GT;
   ＆LT;跨度＆GT;产品在这个图片＆LT; / SPAN＆GT;
    ＆LT;！ - 照片对象的productID的迭代的小阵 - ＆GT;
   ＆LT; D​​IV NG重复=ID在photo.productID＆GT;
       ＆LT;！ -  product_map [ID]是一个单一的对象引用 - ＆GT;
       ＆LT;一个NG-HREF ={{product_map [ID] .productURL}}称号={{product_map [ID] .productName}}＆GT; {{product_map [ID] .productName}}＆LT; / A＆GT;
   ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

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",
    "imageTags":        ["fun","work","utility"]
    "productID":        ["item1","item3"]
}

products.json

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

I don't have any code yet, I'm really trying to make sure I build this properly first.

My goal is to pull images based on tags, so I put a filter on the first ng-repeat portion. This portion works well. But I want to be able to link to the products that are in the images. The easiest thing I found was to do a ng-repeat with the productID as a filter, but if I am pulling 50 photos and each photo has 2 items, that is a ton of repeats. It seems to me that this would require a ton of resources. Is this the best way or is there a better way to handle this?

Code example:

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

解决方案

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>

这篇关于从JSON文件基于另一个JSON文件角读取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！