CODEWITHSUNDEEP
angularjsangular-filters
vrghost
vrghost

Reputation: 1224

Custom filter causes "Duplicates in a repeater are not allowed"

Been struggling with this a bit.

Trying to write a custom filter which checks if the id of the repeat data in friendsDownData (a array with id followed by label), the data is in the following format.

    $scope.friendsDownData = [
        {id:'55bb89251a882a135df1fdee', label: '[email protected]'},
        {id:'55bbd8a5a60af1235e2966f6', label: '[email protected]'},
        {id:'55bbd8cda60af1235e2966f9', label: '[email protected]'},
        {id:'55bf76f0fb8423116d477d9b', label: '[email protected]'},
        {id:'55bf9ffbfb8423116d477d9e', label: '[email protected]'},
        ];

At the time when the error occurs, the friendsDownModel only contains a single id (have tried with empty and multiple, makes no difference as far as I can tell).

   $scope.friendsDownModel = [
       {id: '55bb89251a882a135df1fdee'}
        ]

The complete error message looks as follows:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: friend in friendsDownData track by friend.id| idInIdArray:friendsDownModel, Duplicate key: false, Duplicate value: {"id":"55bbd8cda60af1235e2966f9","label":"[email protected]"}

The ting is that when calling the filter, I am using track by on id. And id should never be a duplicate (they are database ids, and unique). The call to the filter looks as follows.

<div ng-repeat="friend in friendsDownData track by friend.id| idInIdArray:friendsDownModel">

And strangely enough, I can do ng-repeat without track or filter and that works fine. So I think its the filter that causes it, but can't figure out why. The filter looks as follows:

myApp.filter('idInIdArray', function() {
        return function(cuId, idArray) {
            console.log("This is the first id" + idArray[0].id);
            console.log("This is the cuId" + cuId);
            for ( i=0; i<idArray.length; i++ ) {
                if (idArray[i].id === cuId) {
                    console.log("This is a match!");
                    return true;
                }
            }
            return false;

        }

    })

Created a JSFilter, but cant get it to work at all, attached a link anyway if anyone wants to have a look.

https://jsfiddle.net/vrghost/HB7LU/16034/

Upvotes: 1

Views: 813

Answers (2)

Razvan B.
Razvan B.

Reputation: 6771

track by should sit at the end of the expression:

<div ng-repeat="friend in friendsDownData | idInIdArray:friendsDownModel track by friend.id">
  {{friend.label}}
</div>

Updated Fiddle

Upvotes: 1

vrghost
vrghost

Reputation: 1224

OK, managed to figure out (a potential solution) to the issue. The issue was not with the data going in, it was the data coming out. A filter should not return a single reply, it should return an array. I.E. it gets sent both arrays, and return a single array which ng-repeat should use.

I am not certain this is the correct solution, and would love to know if there is another way, as it seems like the filter gets called five times anyway. But here is a working filter for the fiddle (which is not working)

myApp.filter('idInIdArray', function() {
    return function(activeId, idArray) { 
      //activeId contains a list of id's and labels, so that data from friendsDownData.
        var newArray = [];
        for ( i=0; i<activeId.length; i++ ) {
            for ( x=0; x<idArray.length; x++){
                if (activeId[i].id === idArray[x].id){
                    newArray.push(activeId[i]);
                }
            }
        }
        return newArray;
    }

});

Upvotes: 1

Related Questions