Angular.js Error: Duplicates in a repeater are not allowed - Track by index doesn't work

Question

Here is my code for angular js and ionic framework application.

Code :

HTML code:

<ion-header-bar class="bar-calm">
    <h1 class="title">Application Permissions</h1>
</ion-header-bar>
<ion-nav-view name="home">
    <div class="bar bar-subheader bar-positive">
        <h3 class="title"> {{app_name }}</h3>
    </div>
    <ion-content class="has-subheader">
        <div class="list" ng-controller="CheckboxController">
            <ion-checkbox ng-repeat="item in devList track by item.text" ng-model="item.checked" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)">
                {{ item.text }}
                <h3 class="item-text-wrap"> {{ item.details }}</h3>
            </ion-checkbox>
            <div class="item">
                <pre ng-bind="selection | json"></pre>
            </div>
            <div class="item">
                <pre ng-bind="selection1 | json"></pre>
            </div>
        </div>
    </ion-content>
    <ion-footer-bar align-title="left" class="bar-light" ng-controller="FooterController">
        <div class="buttons">
            <button class="button button-balanced" ng-click="infunc()"> Install </button>
        </div>
        <h1 class="title"> </h1>
        <div class="buttons" ng-click="doSomething()">
            <button class="button button-balanced"> Cancel </button>
        </div>
    </ion-footer-bar>

</ion-nav-view>

JS code:

pmApp.controller('CheckboxController', function ($scope, $http, DataService) {


    // define the function that does the ajax call
    getmydata = function () {
        return $http.get("js/sample.json")
            .success(function (data) {
                $scope.applicationdata = data;

            });

    }

    // do the ajax call
    getmydata().success(function (data) {
        // stuff is now in our scope, I can alert it

        $scope.app_name = JSON.stringify($scope.applicationdata.applicationname);
        $scope.devList = JSON.stringify($scope.applicationdata.permissions);
        console.log("Application Name : " + $scope.app_name);
        console.log("Permissions : " + $scope.devList);

    });

    $scope.selection = [];
    $scope.selection1 = [];
    // toggle selection for a given employee by name
    $scope.toggleSelection = function toggleSelection(item) {
        var idx = $scope.selection.indexOf(item);
        var jsonO = angular.copy(item);
        jsonO.timestamp = Date.now();

        DataService.addTrackedData(jsonO);
        $scope.selection1 = DataService.getTrackedData();

        // is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);

        }
        // is newly selected
        else {
            DataService.addSelectedData(item);
            $scope.selection = DataService.getSelectedData();
            /* $scope.selection.push(item);*/
        }
    };

});

Error :

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in devList track by item.text, Duplicate key: undefined, Duplicate value: {

Json :

{
    "applicationname": "Facebook",
    "permissions": [
        {
            "text": "Device & app history",
            "details": "Allows the app to view one or more of: information about activity on the device, which apps are running, browsing history and bookmarks",
            "checked": "false"
        },
        {
            "text": "Identity",
            "details": "Uses one or more of: accounts on the device, profile data",
            "checked": false
        }]

}

Questions :

Why this error came? I can not see there is any duplicate in my json. I also tried track by $index but its not working. Actually it removes the duplicate error but I can see a lot empty checkboxes.
As of now I am getting "applicationname" value as "Facebook". Actually I want it as Facebook only. What should I change in parsing of json.

Any help would be appreciated.

It looks like you are setting $scope.devList = JSON.stringify(something) which would convert your object into a string. Did you mean to parse instead to get the object from the JSON? — Kevin F, Jul 07 '15 at 16:57
@KevinF I used Json.Parse but its not working. It is giving parsing error — sam_k, Jul 07 '15 at 16:59
The code you have linked gives the error "Uncaught ReferenceError: pmApp is not defined" — Frank Bryce, Jul 07 '15 at 17:03
@JohnCarpenter thats not fully working code. thats why it gives error. I have posted only piece of code. — sam_k, Jul 07 '15 at 17:05
@JohnCarpenter thanks I have removed that part: ` $scope.app_name = $scope.applicationdata.applicationname; $scope.devList = $scope.applicationdata.permissions;` Its working. What about question 1? You are great in help — sam_k, Jul 07 '15 at 17:31

score 2 · Accepted Answer · answered Jul 07 '15 at 17:37

2

$scope.app_name = JSON.stringify($scope.applicationdata.applicationname); and $scope.devList = JSON.stringify($scope.applicationdata.permissions); both seem fishy. It looks like you're getting JSON data, and stringify-ing it.

With regard to question #1, it appears ng-repeat was probably looping over a string, which it treats as an array of characters. Without knowing the exact contents of $scope.applicationdata.applicationname and $scope.applicationdata.permissions I can't say for sure but this would definitely cause your issue.

With regard to question #2, I'm not 100% sure what you mean.

answered Jul 07 '15 at 17:37

Frank Bryce

8,076
4
38
56

Thanks a lot. I guess your suggestion will work for both of my questions. – sam_k Jul 07 '15 at 18:22
Different than actual question : How can I show each item separately on different page. by clicking next button. ? – sam_k Jul 07 '15 at 18:58
Try using `ng-show`. Link: https://docs.angularjs.org/api/ng/directive/ngShow . If you need more assistance, I'd open a new question or do a quick google or SO search. People do this sort of thing a lot. – Frank Bryce Jul 07 '15 at 19:01
Thanks , I will try and post my question in detail – sam_k Jul 07 '15 at 19:05
Here you can take a look on my question. thanks : http://stackoverflow.com/questions/31278454/display-data-till-length-of-json-array – sam_k Jul 07 '15 at 20:17

score 1 · Answer 2 · answered Jul 07 '15 at 16:59

1

The problem is you are using a repeater for boolean values, so if there are 2 checked or 2 unchecked items, they are marked as duplicates:

       <ion-checkbox ng-repeat="item in devList track by item.text" ng-model="item.checked" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)">

I'd recommend you use the ng-repeat in a containing div like:

<div ng-repeat="item in devList">
   <ion-checkbox ng-model="item.checked" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)">
</div>

answered Jul 07 '15 at 16:59

yvesmancera

2,915
5
24
33

Thanks for your answer. not working. It gives error like this . `Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in devList, Duplicate key: string:t, Duplicate value: t` – sam_k Jul 07 '15 at 17:02
I have changed as you suggested : `
{{ item.text }}
{{ item.details }}

` – sam_k Jul 07 '15 at 17:03
Duplicate key: string:t sounds like you are using a repeater to repeat characters in a string. $scope.devList = JSON.stringify($scope.applicationdata.permissions); devList is a string, not an array of objects, remove the JSON.stringify and see if it helps. – yvesmancera Jul 07 '15 at 17:04

Angular.js Error: Duplicates in a repeater are not allowed - Track by index doesn't work

2 Answers2

{{ item.details }}

Linked