-1

error console:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: m in diff, Duplicate key: object:131, Duplicate value: {"title":"Diamond Push Up","vid":"img/3mm.mp4","time":60,"cal":3,"reps":20}

Any workarounds for the above error?

$scope.moves = [
    {title:"Jumping Jacks", length:"30", difficulty: "5 stars"},
    {title:"Push Ups", length:"40", difficulty: "4 stars"},
    {title:"Mountain Climbers", length:"60", difficulty: "2 stars"}
    ];

This works

$scope.workoutone =[
$scope.moves[0],
$scope.moves[1],
$scope.moves[2],
];

This does not work, only obvious difference is I am repeating the information

$scope.workouttwo =[
$scope.moves[2],
$scope.moves[1],
$scope.moves[2],
$scope.moves[0],
$scope.moves[1],
$scope.moves[2],
];

Is there any work around for using the same information from array multiple times in a new array? Thanks in advance for the help

EDIT (the HTML displayed to the user): Apologies for being vague! So the user will see workoutone initially but can choose, by clicking a button, to view other workouts such as workouttwo. Workoutone shows up fine (code is below) but as soon as the user clicks workouttwo, the information does not refresh. And then when the user clicks start workout, which just goes through each move in the workout, it outputs "NaN".

This is the code to show the workouts

<ion-list>
 <ion-item ng-repeat="m in workoutchoice" class="eachitem">

     <div class="animateded slideInUp" style="width:90%;max-width:450px;height:45px;margin-left:auto;margin-right:auto;background-color:white;border:0px solid black;color:red;border-radius:7px;">
          <div style="height:100%;float:left;border:0px solid blue;">
            <img src="img/1-2.jpg" style="height:100%;align:center;border-radius:7px;"> 
          </div>

          <div style="width:40%;height:100%;float:left;border:2px solid blue;margin-top:8px;margin-left:5px;font-size:12px;">
            {{m.title}}
          </div>

          <div style="width:25%;height:100%;float:right;border:2px solid red;text-align:right;margin-right:10px;color:black;margin-top:8px;font-size:12px;">
            {{m.reps}}x
          </div>
    </div>

  </ion-item>
</ion-list>

And this is the code for the button that allows different choices of workouts 

  <div style="width:100%;height:50px;background-color:white;border:2px solid transparent;">
    <div style="width:330px;border:2px solid transparent;margin-left:auto;margin-right:auto;margin-top:-10px;">
        <img src="{{bub[3]}}" style="height:25px;margin-top:15px;float:left" ng-click="choosen(workoutone);">
        <img src="{{bub[4]}}" style="height:25px;margin-top:15px;margin-left:31px;" ng-click="choosen(workouttwo);">


    </div>

  </div>

Another EDIT (js function called)

$scope.bubble = function(selectedCal) {
  $rootScope.bub = selectedCal;
  console.log(selectedBook);
}

$scope.choosen = function(selectedChoose) {
  $rootScope.workoutchoice = selectedChoose;
  console.log(selectedChoose);
  $ionicScrollDelegate.resize();
}
MehdiN
  • 251
  • 4
  • 18
  • What exactly isn't working? This looks like it should work fine? Are you getting any errors? What are you expecting? – JVDL Nov 13 '16 at 01:58
  • *"This does not work"* is not an actionable problem statement that tells us much. You haven't really identified what expectations are either. The subject line mentions error but you ignored whatever it is in the explanation. I'm pretty sure I know what that error is and it should be easy to search on the web...but I am not going to waste time and effort on a guess – charlietfl Nov 13 '16 at 01:59
  • Sorry about being vague...I added more code and info. Really appreciate any help :) – MehdiN Nov 13 '16 at 02:12
  • can you also post the js which contains the click function's definition being called? and can you also post the html code calling the click function? – GraveyardQueen Nov 13 '16 at 02:14
  • None of the html represents anything to do with the explanation. `workoutone ` and `workouttwo` aren't included in it. Please provide [mcve] and proper details in question – charlietfl Nov 13 '16 at 02:18
  • posted the js funciton called and the first edit shows the HTML shown to the user – MehdiN Nov 13 '16 at 02:20
  • I will create a new more succinct question with just the error and basic code as requested by @charlietfl...I just have to wait 90 minutes – MehdiN Nov 13 '16 at 02:47
  • so did you use track by as the error tells you to? The error includes a link...use it and read all the details as do the `ng-repeat` docs and a google search of that error will produce lots of results also – charlietfl Nov 13 '16 at 02:52
  • Possible duplicate of [Angular ng-repeat Error "Duplicates in a repeater are not allowed."](http://stackoverflow.com/questions/16296670/angular-ng-repeat-error-duplicates-in-a-repeater-are-not-allowed) – Debug Diva Nov 13 '16 at 16:45

1 Answers1

0

Hey I have received same error many times. To avoid duplicate error use $index in ng-repeat.

<ion-list>
 <ion-item ng-repeat="m in workoutchoice track by $index" class="eachitem">

 <div class="animateded slideInUp" style="width:90%;max-width:450px;height:45px;margin-left:auto;margin-right:auto;background-color:white;border:0px solid black;color:red;border-radius:7px;">
      <div style="height:100%;float:left;border:0px solid blue;">
        <img src="img/1-2.jpg" style="height:100%;align:center;border-radius:7px;"> 
      </div>

      <div style="width:40%;height:100%;float:left;border:2px solid blue;margin-top:8px;margin-left:5px;font-size:12px;">
        {{m.title}}
      </div>

     <div style="width:25%;height:100%;float:right;border:2px solid red;text-align:right;margin-right:10px;color:black;margin-top:8px;font-size:12px;">
            {{m.reps}}x
          </div>
    </div>

  </ion-item>
</ion-list>
Helping hand
  • 2,800
  • 2
  • 19
  • 31