Duplicate in ng-repeat error

Question

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:

This is not a duplicate. Those methods from other places didnt work..

Its not a duplicate of that. I already tried that and did my no help... @fracz — amanuel2, Jan 17 '16 at 20:55
Are you sure the `messages` is an array? The duplicate error says its `f` duplicated, so maybe the `messages` is a string, not an array? — fracz, Jan 17 '16 at 20:57

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

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.

edited May 23 '17 at 12:31

Community

1
1

answered Jan 17 '16 at 20:51

fracz

20,536
18
103
149

Still says same error... You can see my cloud9 file for more details. I changed my li line to yours.. – amanuel2 Jan 17 '16 at 20:54
How do i make it an array. that includes all posts. That is what im stumbled on... – amanuel2 Jan 17 '16 at 21:07
What is an example content of the `snapshot.val().Posts`? – fracz Jan 17 '16 at 21:10
I tried to push it but it says Uncaught TypeError: $scope.messagess.push I will update the anwser. – amanuel2 Jan 17 '16 at 21:11
Edited. snapshot.val().Posts is like when you submit a message using the button its the value of it. I will update anwser again to tell you what that is – amanuel2 Jan 17 '16 at 21:12
Ok i got it but i needed another firebase. Anways thank you for your time sir – amanuel2 Jan 17 '16 at 21:29

Duplicate in ng-repeat error

1 Answers1