Error and MySQL: [ngRepeat: dupes] Duplicates in a repeater are

0

I am developing an example with IONIC but it is giving the error:

ionic.bundle.js:19387 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: usuario in usuarios, Duplicate key: string:c, Duplicate value: c
http://errors.angularjs.org/1.3.6/ngRepeat/dupes?p0=usuario%20in%20usuarios&p1=string%3Ac&p2=c
    at ionic.bundle.js:7888
    at ngRepeatAction (ionic.bundle.js:32262)
    at Object.$watchCollectionAction [as fn] (ionic.bundle.js:21887)
    at Scope.$digest (ionic.bundle.js:22020)
    at Scope.$apply (ionic.bundle.js:22282)
    at done (ionic.bundle.js:17439)
    at completeRequest (ionic.bundle.js:17629)
    at XMLHttpRequest.requestLoaded (ionic.bundle.js:17570)(anonymous function) @ ionic.bundle.js:19387(anonymous function) @ ionic.bundle.js:16350Scope.$digest @ ionic.bundle.js:22038Scope.$apply @ ionic.bundle.js:22282done @ ionic.bundle.js:17439completeRequest @ ionic.bundle.js:17629requestLoaded @ ionic.bundle.js:17570

I have reviewed the code several times, I have tried to change in ng-repeat with other variables, but either the error does or does not show the data. What can it be?

My PHP:

    <?php

header("Access-Control-Allow-Origin: *");
header("Content-Type: text/html; charset=utf-8");

$data = file_get_contents("php://input");
$objData = json_decode($data);

$dns = "mysql:host=mysql70.ramosdainformatica.com.br;dbname=ramosdainforma70";
$user = "usuario";
$pass = "senha";


$counter = $objData->counter;
$token = $objData->token;

try {   
    $con = new PDO($dns, $user, $pass);

    echo "Abriu con";

    if(!$con){
        echo "Não foi possivel conectar com Banco de Dados!";
    }
    if ($token === "1f3d2gs3f2fg3as2fdg3re2t1we46er45" && isset($token)) {  


        $query = $con->prepare('SELECT * FROM usuario_app ORDER BY nome LIMIT '.$counter.', 5');
        $query->execute();


        $out = "[";
        while($result = $query->fetch()){
            if ($out != "[") {
                $out .= ",";
            }
            $out .= '{"cod_user: "'.$result["cod_user"].'",';
            $out .= '"nome": "'.$result["nome"].'",';
            $out .= '"pais": "'.$result["pais"].'",';
            $out .= '"cep": "'.$result["cep"].'"';
            $out .= '"logradouro": "'.$result["logradouro"].'",';
            $out .= '"complemento": "'.$result["complemento"].'",';
            $out .= '"bairro": "'.$result["bairro"].'",';
            $out .= '"cidade": "'.$result["cidade"].'"';
            $out .= '"estado": "'.$result["estado"].'",';
            $out .= '"celular": "'.$result["celular"].'",';
            $out .= '"email": "'.$result["email"].'",';
            $out .= '"senha": "'.$result["senha"].'"';
            $out .= '"data_cadastro": "'.$result["data_cadastro"].'",';
            $out .= '"latitude": "'.$result["latitude"].'",';
            $out .= '"longitude": "'.$result["longitude"].'"}';            

        }
        $out .= "]";
        echo $out; 


    }
} catch (Exception $e) {
    echo "Erro: ". $e->getMessage();
};

My Controller:

    (function() {
    "use strict";

    angular.module("myApp").controller("initCtrl", function($scope, Data){
        $scope.home = "Usuários";
        $scope.perfil = "Perfil";

        $scope.usuarios = [];

        var getData = function(){
            var params = {
                counter:$scope.usuarios.length,
                token:"1f3d2gs3f2fg3as2fdg3re2t1we46er45",
            };

            Data.getData(params).success(function(data) {
                    $scope.usuarios = data;
            }).error(function(data) {
                console.log(data? data: "Não foi possível acessar ao banco de dados.");
            });


        };

        getData();



});
})();

My Service:

    (function(){
    "use strict";

    angular.module("myApp").value("Config", {

        getUrl: "http://www.ramosdainformatica.com.br/food/"
    });

    angular.module("myApp").service("Data", function($http, Config){
        //recuperação de dados
        this.getData = function(params){
            return $http({
                method: "POST",
                url: Config.getUrl + "apinhac.php",
                data: params,
                headers : {
                                'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
                            }
            });
        };


    });
})();

My HTML list:

<ion-view view-title="{{home}}">        

    <ion-content>
        <h1>{{home}}</h1>

        <ion-list ng-repeat="usuario in usuarios">

            <ion-item>
                <h1 class="assertive">{{usuario.nome}}</h1>
                <p>{{usuario.email}}</p>
            </ion-item>

        </ion-list>

    </ion-content>
    </ion-view>

I have reviewed the code several times, I have tried to change in ng-repeat with other variables, but either the error does or does not show the data. What can it be?

    
asked by anonymous 03.05.2016 / 00:38

2 answers

1

It turns out that the property that angular is using to be the key to your loop, is repeating itself at some time within your repetition. Try to use another key, some that you are sure is unique. To do this use the expression "track by" in your ng-repeat.

Example:

<ion-list ng-repeat="usuario in usuarios track by usuario.email">
    
03.05.2016 / 00:46
1

As stated in your friend Ziron's response, you should make sure that the element used in track by is unique, not repeated in another element. For example, a id obtained from the database.

For this we use the option track by to follow the loop based on this index. BUT, if you do not know or do not know if you have a unique value, or you simply do not want to use a track based on its properties, you can use $index which is the position of the object inside the array, ie it will always be unique, because there is only one element, a second element, etc.

Use like this: ng-repeat="usuario in usuarios track by $index"

    
03.05.2016 / 01:27