Question

我尝试使用以下json的angulajs进行迭代

"[{
\"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我收到浏览器崩溃

Answer 1

A）如果您收到“不允许在转发器中重复”，则需要将track by $index添加到 ngRepeat

示例：

<div ng-repeat="product in products track by $index">
stackoverflow中的
answer

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/

在json迭代与角度有问题

1 个答案: