having problems on json iterate with angular

Question

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

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

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/

edited May 23 '17 at 12:03

Community

1
1

answered Mar 19 '14 at 11:52

Alex Choroshin

6,177
2
28
36

1

in this case the browser crashes – fefe Mar 19 '14 at 11:53
you mean the slashes are producing the error? I get the datas from restapi as json converted – fefe Mar 19 '14 at 12:04
you need to you use angular.fromJson(data);, I updated my answer – Alex Choroshin Mar 19 '14 at 12:13
have you used angular.fromJson(your json string) ? – Alex Choroshin Mar 19 '14 at 12:20
yes take a look on response looks good, but the list should not be so long I have just 10 items – fefe Mar 19 '14 at 12:20
very strange, got JSON string from your rest service and it worked. http://jsfiddle.net/choroshin/VJmFs/4/ – Alex Choroshin Mar 19 '14 at 12:28
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/50028/discussion-between-alex-choroshin-and-fefe) – Alex Choroshin Mar 19 '14 at 12:34
can I debug the variable in the view is there a way? I would like to know if the value is okay – fefe Mar 19 '14 at 12:34

having problems on json iterate with angular

1 Answers1