CODEWITHSUNDEEP
jsonangularjsloops
fefe
fefe

Reputation: 9065

having problems on json iterate with angular

I try to iterate with angulajs the following 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
}]"

but I get 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:" error

and hier is the way How do I fetch and iterate the data

Controller

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);
    });
}

View iterate

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

trying out product in products track by $index I get Browser Crash

Upvotes: 0

Views: 887

Answers (1)

Alex Choroshin
Alex Choroshin

Reputation: 6187

A) if you get "Duplicates in a repeater are not allowed" you need to add track by $index to ngRepeat

example:

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

answer in stackoverflow

B) you need to get your object from JSON so you need to use angular.fromJson(json);
Example:

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

Live example :http://jsfiddle.net/choroshin/VJmFs/2/

Upvotes: 2

Related Questions