Ionic "track by" error with tinder cards

Question

I started learning Ionic 2 weeks ago and right now I am creating a small project to practice.You can download my project from my Github : https://github.com/KaanYildirim/ionicTest

I am trying to use tinder like cards which is created from the ionic team itself. (https://github.com/driftyco/ionic-ion-tinder-cards)

I have tried every possible solution with "track by" expression but I am still getting this error:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: card in cards track by card.id, Duplicate key: undefined, Duplicate value: undefined

I have tried to fix this error with "track by $index" and "track by card.id "(every card has an "id" attribute in .Json file) but it didn't worked. I guess that i made a small mistake and can't find it.

Can someone please help me? Thanks

index.html:

    <td-cards>
      <td-card ng-repeat="card in cards track by card.id" on-destroy="cardDestroyed($index)" on-swipe="cardSwiped($index)">
        <div class="list card myCard">

          <!-- Card Header-->
          <div class="item topicDescription cardHeader">
             <p>{{card.topicDescription}}</p>
          </div>

          <!-- Card Body-->
          <div class="item item-body noBorder">
            <img class="full-image" src="{{card.image}}">
            <h3 class="cardTitle">{{card.title}}</h3>
            <p>{{card.summary}}</p>  
          </div>

          <!-- Card Footer-->
          <div class="item tabs tabs-secondary tabs-icon-left cardFooter">
             <a class="tab-item" ng-click="readMore($index)" href="#">
                 <i class="{{card.actionButtonIcon}}"></i>
                 {{card.actionButtonText}} {{card.type}} ( {{card.additionalInfo}} )
             </a>

             <a class="tab-item" ng-click="share($index)" href="#">
                <i class="icon ion-share"></i>
                Share
              </a>
          </div>
        </div>
      </td-card>
    </td-cards>

Json File:

{
  "articles": [
    {
      "id":1,
      "topicDescription": "Find a Idea",
      "image": "img/uber.jpg",
      "title": "Uber Lowers Fares In Over 100 Cities",
      "summary": "Uber is lowering prices in over 100 U.S. and Canadian cities, effective tomorrow. January is a slower month for the car service and the company says it is reducing fares in order to increase demand.",
      "link": "http://techcrunch.com/2016/01/08/uber-lowers-fares-in-over-100-cities/",
      "actionButtonIcon": "icon ion-ios-glasses-outline",
      "actionButtonText": "Read",
      "type":"Article",
      "additionalInfo": "3 min"
    },
    {
      "id":2,
      "topicDescription": "Test a Idea",
      "image": "img/lean.jpg",
      "title": "The Lean Startup",
      "summary": "Great book about startups and how to validate your idea without spending to much money and time.",
      "link": "http://www.amazon.de/Lean-Startup-Innovation-Successful-Businesses/dp/0670921602/ref=sr_1_2?ie=UTF8&qid=1452779528&sr=8-2&keywords=the+lean+startup",
      "actionButtonIcon": "icon ion-ios-bookmarks-outline",
      "actionButtonText": "Buy",
      "type":"Book",
      "additionalInfo": "Amazon"
    },
    {
      "id":3,
      "topicDescription": "Build",
      "image": "img/evernote.jpg",
      "title": "Note Taking App",
      "summary": "From short lists to lengthy research, no matter what form your writing takes, Evernote keeps you focused on moving those ideas from inspiration to completion.",
      "link": "https://evernote.com/?var=3",
      "actionButtonIcon": "icon ion-hammer",
      "actionButtonText": "Download",
      "type":"App",
      "additionalInfo": "App Store"
    },
    {
      "id":4,
      "topicDescription": "Measure",
      "image": "img/steve.jpg",
      "title": "Steve Blank: How to Build a Great Company",
      "summary": "Join Silicon Valley serial entrepreneur-turned-educator Blank in a lively discussion with Dan'l Lewin of Microsoft. This program will introduce best practices, lessons and tips that have swept the startup world, offering a wealth of proven advice and information for entrepreneurs of all stripes.",
      "link": "https://www.youtube.com/watch?v=1RTcXwJuCaU",
      "actionButtonIcon": "icon ion-ios-videocam-outline",
      "actionButtonText": "Watch",
      "type":"Video",
      "additionalInfo": "Youtube"
    },
    {
      "id":5,
      "topicDescription": "Find a Idea",
      "image": "img/uber.jpg",
      "title": "Uber Lowers Fares In Over 100 Cities",
      "summary": "Uber is lowering prices in over 100 U.S. and Canadian cities, effective tomorrow. January is a slower month for the car service and the company says it is reducing fares in order to increase demand.",
      "link": "http://techcrunch.com/2016/01/08/uber-lowers-fares-in-over-100-cities/",
      "actionButtonIcon": "icon ion-ios-glasses-outline",
      "actionButtonText": "Read",
      "type":"Article",
      "additionalInfo": "3 min"
    },
    {
      "id":6,
      "topicDescription": "Test a Idea",
      "image": "img/lean.jpg",
      "title": "The Lean Startup",
      "summary": "Great book about startups and how to validate your idea without spending to much money and time.",
      "link": "http://www.amazon.de/Lean-Startup-Innovation-Successful-Businesses/dp/0670921602/ref=sr_1_2?ie=UTF8&qid=1452779528&sr=8-2&keywords=the+lean+startup",
      "actionButtonIcon": "icon ion-ios-bookmarks-outline",
      "actionButtonText": "Buy",
      "type":"Book",
      "additionalInfo": "Amazon"
    },
    {
      "id":7,
      "topicDescription": "Build",
      "image": "img/evernote.jpg",
      "title": "Note Taking App",
      "summary": "From short lists to lengthy research, no matter what form your writing takes, Evernote keeps you focused on moving those ideas from inspiration to completion.",
      "link": "https://evernote.com/?var=3",
      "actionButtonIcon": "icon ion-hammer",
      "actionButtonText": "Download",
      "type":"App",
      "additionalInfo": "App Store"
    },
    {
      "id":8,
      "topicDescription": "Measure",
      "image": "img/steve.jpg",
      "title": "Steve Blank: How to Build a Great Company",
      "summary": "Join Silicon Valley serial entrepreneur-turned-educator Blank in a lively discussion with Dan'l Lewin of Microsoft. This program will introduce best practices, lessons and tips that have swept the startup world, offering a wealth of proven advice and information for entrepreneurs of all stripes.",
      "link": "https://www.youtube.com/watch?v=1RTcXwJuCaU",
      "actionButtonIcon": "icon ion-ios-videocam-outline",
      "actionButtonText": "Watch",
      "type":"Video",
      "additionalInfo": "Youtube"
    }
  ]
}

Please include the relevant parts of your code into the question, it will make it easier for the people to identify the problem and provide specific answers. And welcome to StackOverflow! — plamut, Jan 16 '16 at 13:57
thanks for the response. I didn't know where the problem is that's why I uploaded the all project. — Kaan Yıldırım, Jan 16 '16 at 14:29

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I examined your code. In your controllers.js file you handle the cardSwiped event by manually adding an undefined card to your list

$scope.cardSwiped = function(index) {
        var newCard = // new card data
         $scope.cards.push(newCard);
    };

This causes your cards to have multiple undefined elements that ng-repeat will be forced to handle as duplicates. Remove/fix that handler and things should work.

BTW, this code will work normally because javascript will handle them as a single line var newCard = $scope.cards.push(newCard); This means at the end of the function your newCard variable will have the new length of the cards array.

I get it now. Thank you again!! – Kaan Yıldırım Jan 16 '16 at 14:37 — Kaan Yıldırım, Jan 16 '16 at 14:37

Ionic "track by" error with tinder cards

1 Answers1