CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
amanuel2
amanuel2

Reputation: 4646

Duplicate in ng-repeat error

Hello for some reason it says as a error:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: mes in messagess, Duplicate key: string:f, Duplicate value: f

But i dont understand why, i personally dont see any duplicates...

Here is my Cloud9 File to see the code and make changes...

Here is my Chat.html:

<h1 style = "text-align:center; position:relative; left:-80px"> Universal Chat </h1>


<div id = "rectangle" >
      <ul id="example-messages" class="example-chat-messages">
        <li ng-repeat = "mes in messagess">
            {{mes}}
        </li>
      </ul>
    </div>
  <textarea class="form-control" id="chatbox" rows="1" ng-model = "textValue">

  </textarea>
  <a class="btn right" id = "submitButton" ng-click = "submit()">
       <span class="left title">Submit Comment</span>
       <span class="right icon icon-comment"><span class="slant-right"></span></span>
     </a>

And my chatController.js:

app.controller('chatController', ["$scope", 'AuthService', "Auth", "Ref", "$rootScope", "$firebaseArray", "$firebaseObject",
    function($scope, AuthService, Auth, Ref, $rootScope, $firebaseArray, $firebaseObject) {
        var postsArray = {}
        console.log(AuthService.User.email) //Gives me correct Email
        console.log(AuthService.User.password) //Gives me correct password
        console.log(AuthService.User.uid) //Gives me correct uid
        console.log(AuthService.User.username) //Gives me correct username
        some = $firebaseArray(Ref.child("Posts").child(AuthService.User.username));
        console.log((some))
        var postsFirebase = $firebaseObject(Ref)
        var username = AuthService.User.username
$scope.messagess = {}
        $scope.submit = function() {
            if (!($scope.textValue)) {

            }
            else {

                some.$add({
                    Posts: $scope.textValue
                }).then(function(authData) {
                    console.log(authData.path)
                    Ref.child("Posts").child(username).child(authData.path.o[2]).on("value", function(snapshot) {
                        console.log(snapshot.val().Posts)

                           $scope.messagess.push(snapshot.val().Posts)
                           snapshot.val().Posts

                    }, function(errorObject) {
                        console.log("The read failed: " + errorObject.code);
                    });


                }).catch(function(errorObject){
                    alert("See the console for more details")
                    console.error(errorObject.code)
                })

            }

        }
    }
])

SnapShot.val is like the current post you submitted in my firebase here:

enter image description here This is not a duplicate. Those methods from other places didnt work..

Upvotes: 1

Views: 543

Answers (1)

fracz
fracz

Reputation: 21278

The duplicate error says its f duplicated, so I suppose the messages is a string, not an array. What you are trying to do is to display every message. But now, you are iterating over the message itself, that is:

<li ng-repeat="mes in 'message'">

Which takes m for the first item, e for second, s fot the third. And, as you may suppose, it will throws the error when it notices the next (duplicated) s.

You should iterate over array of messages, i.e.:

<li ng-repeat="mes in ['message']">

Which will display them correctly. Please review what is saved to the scope in this line:

$scope.messagess = snapshot.val().Posts

It should be an array.

However, please note that after fixing it you should still use the track by as posting the same message twice will tirgger the error again.

<li ng-repeat="mes in messages track by $index">

Related: Angular ng-repeat Error "Duplicates in a repeater are not allowed."]

If you still have the problem, please try to create Minimal, Complete, and Verifiable example so we can help.

UPDATE:

Based on the screen of data structure you provided (the Posts is string as I supposed), you should change the scope assignment to:

$scope.messagess = snapshot.val()

and then, in the view, read all values, i.e.

<li ng-repeat="mes in messages">{{ mes.Posts }}</li>

However, I find this structure (and naming) weird.

Upvotes: 1

Related Questions