代码之家  ›  专栏  ›  技术社区  ›  fefe

在使用angular进行json迭代时遇到问题

  •  0
  • fefe  · 技术社区  · 12 年前

    我尝试使用anglejs迭代以下json

    "[{
    \"product_id\":\"1517519077\",
    \"prod_name\":\"Desktop PC Dell Precision T5610 Workstation\",
    \"gpu\":\"QuadroK4000\",
    \"cpu\":\"\",
    \"ram_cap\":\"8\",
    \"ram_type\":\"DDR3\",
    \"hdd_cap\":\"500\",
    \"hdd_speed\":\"7200\",
    \"hdd_type\":\"HDD\",
    \"display_size\":\"\",
    \"display_res\":\"\",
    \"price\":\"2319\",
    \"cpu_rank\":\"0\",
    \"cpu_rate\":\"0\",
    \"gpu_rank\":\"2853\",
    \"gpu_rate\":\"38\",
    \"category\":\"2\",
    \"tld\":\"de\",
    \"feed_id\":\"1\",
    \"gewicht\":null,
    \"os\":null,
    \"brand\":\"DELL\",
    \"update_time\":null,
    \"laufwerk\":null},
    
    {\"product_id\":\"1534720291\",
    \"prod_name\":\"Desktop PC Dell Precision T3610 BTX Base\",
    \"gpu\":null,
    \"cpu\":\"\",
    \"ram_cap\":\"8\",
    \"ram_type\":\"DDR3\",
    \"hdd_cap\":\"500\",
    \"hdd_speed\":\"7200\",
    \"hdd_type\":\"HDD\",
    \"display_size\":\"\",
    \"display_res\":\"\",
    \"price\":\"1164\",
    \"cpu_rank\":\"0\",
    \"cpu_rate\":\"0\",
    \"gpu_rank\":null,
    \"gpu_rate\":null,
    \"category\":\"2\",
    \"tld\":\"de\",
    \"feed_id\":\"1\",
    \"gewicht\":null,
    \"os\":null,
    \"brand\":\"DELL\",
    \"update_time\":null,
    \"laufwerk\":null
    }]"
    

    但我明白 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: product in products, Duplicate key: string:" 错误

    而hier是我获取和迭代数据的方式

    控制器

    function ProductsCtrl($scope, $http ) {
        $http({
            method: 'GET',
            url: 'http://www.someapi.com/api/restapi/products.json'
       }).success(function(data, status, headers, config) {
            // this callback will be called asynchronously       
            $scope.products = data;
            console.log($scope.products);
        }).error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            console.log(headers);
            console.log(data);
        });
    }
    

    视图迭代

    <ul ng-repeat="product in products">
           <li>{{ product.prod_name }}</li>
    </ul>
    

    试用 product in products track by $index 我遇到浏览器崩溃

    1 回复  |  直到 12 年前
        1
  •  2
  •   Community Mohan Dere    9 年前

    A) 如果您得到“中继器中不允许重复”,则需要添加 track by $index 到 ng重复

    例子:

    <div ng-repeat="product in products track by $index">
    

    answer 在stackoverflow

    B) 您需要从JSON获取对象,因此需要使用 angular.fromJson(json);
    例子:

    var data="[{\"product_id\":\"1517519077\",\"prod_name\":\"Desktop PC Dell Precision T5610 Workstation\",\"gpu\":\"QuadroK4000\",\"cpu\":\"\",\"ram_cap\":\"8\",\"ram_type\":\"DDR3\",\"hdd_cap\":\"500\",\"hdd_speed\":\"7200\",\"hdd_type\":\"HDD\",\"display_size\":\"\",\"display_res\":\"\",\"price\":\"2319\",\"cpu_rank\":\"0\",\"cpu_rate\":\"0\",\"gpu_rank\":\"2853\",\"gpu_rate\":\"38\",\"category\":\"2\",\"tld\":\"de\",\"feed_id\":\"1\",\"gewicht\":null,\"os\":null,\"brand\":\"DELL\",\"update_time\":null,\"laufwerk\":null},{\"product_id\":\"1534720291\",\"prod_name\":\"Desktop PC Dell Precision T3610 BTX Base\",\"gpu\":null,\"cpu\":\"\",\"ram_cap\":\"8\",\"ram_type\":\"DDR3\",\"hdd_cap\":\"500\",\"hdd_speed\":\"7200\",\"hdd_type\":\"HDD\",\"display_size\":\"\",\"display_res\":\"\",\"price\":\"1164\",\"cpu_rank\":\"0\",\"cpu_rate\":\"0\",\"gpu_rank\":null,\"gpu_rate\":null,\"category\":\"2\",\"tld\":\"de\",\"feed_id\":\"1\",\"gewicht\":null,\"os\":null,\"brand\":\"DELL\",\"update_time\":null,\"laufwerk\":null}]"
    
      $scope.products=angular.fromJson(data);
    

    实时示例: http://jsfiddle.net/choroshin/VJmFs/2/