Duplicates in a repeater are not allowed angular.js

Question

I have a view controller with the following code that fetches data from api server:

$scope.recent_news_posts = localStorageService.get('recent_news_posts') || [];


        $http({method: 'GET', url: 'http://myapi.com/posts'}).success(function(data) {
            if ($scope.$$destroyed) {
                return
            }

            $scope.recent_news_posts = data || [];
            localStorageService.set("recent_news_posts", $scope.recent_news_posts);
        });

In template:

<md-card class="news-item" ng-repeat="post in recent_news_posts track by post.link" ng-click="openExternalLink(post.link);">
                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">{{ post.title }}</span>
                            <div class="md-subhead" ng-bind-html="post.content"></div>
                        </md-card-title-text>
                        <md-card-title-media>
                            <img src="{{ post.image }}" class="md-media-lg">
                        </md-card-title-media>
                    </md-card-title>
                </md-card>

And sometimes I getting reports from sentry like:

[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: post in recent_news_posts track by post.link, Duplicate key: function link(), Duplicate value:

http://errors.angularjs.org/1.5.9/ngRepeat/dupes?p0=post%20in%20recent_news_posts%20track%20by%20post.link&p1=function%20link()&p2=%0A

I read article and added track by, but this didn't help. I suppose this is maybe because ng-repeat function not finished in time new data from server came. But don't know how to fix this.

Answer 1

Check your data which comes from API. Probably there are some items which have exactly the same post.link inside. If you use track by then the item which is used for tracking needs to be unique!