m4gn1f1c4nt
m4gn1f1c4nt

Reputation: 198

ng-repeat doesnt loop thru my array

Hey everybody can somebody please give me a clue what im doing wrong here?

I trying to build a wrapper where every element in my array gets a and a id But when i loop thru my real array i only get a error with the text: Error: [ngRepeat:dupes] ...
With a fake array i made it works perfect.

MY HTML:

    <div class="translaterBox">
        <span ng-repeat="person in persons" id="{{person}}">
            {{person + " "}}
        </span>

        <span ng-repeat="text in textWords" id="{{text}}">
            {{text + " "}}
        </span>
    </div>

MY SCRIPT

var app = angular.module('splitScreenApp', []);
app.controller('splitCtrl', function ($scope, $http) {
    $scope.translatetText = "Translate Here";

    $http.get("getContent.php")
        .then(function (response) {
            var content = response.data.content;
            $scope.content = content;

            function splitContentToWords() {
                var text;
                for(var i = 0; i <= content.length;i++ ){
                    if(content[i].text){
                        var text = content[i].text;
                    }
                    return text.split(' ');
                }

            }
            $scope.persons = [
                'Jack',
                'Jill',
                'Tom',
                'Harvey'
            ];
            $scope.textWords = splitContentToWords();
            console.log($scope.textWords);
            console.log($scope.persons);
        });
});

Thank you really much for your help

Upvotes: 0

Views: 59

Answers (1)

h01001000
h01001000

Reputation: 281

When you get an error about dupes from Angular, it is because there are duplicate keys. You can solve this by using track by as seen in the documentation.

Try changing your ng-repeat to:

<span ng-repeat="person in persons track by $index" id="{{person}}">
<span ng-repeat="text in textWords track by $index" id="{{text}}">

Upvotes: 4

Related Questions