View information in angular HTML

Question

Hello, person, I’m beginner in angular, javascript and etc. I’m trying to display the information of a json returned by a php script, but I’m having this error:

Duplicates in a Repeater are not allowed

Angular:

angular.module("moduloJogos", []);
angular.module("moduloJogos").controller("moduloJogosCTRL", function($scope, $http) {
  $http.get('jogos.php').then(function(response) {
    $scope.partidas = response.data;
    console.log(response.data);
  });
});

HTML. Table that displays:

<tbody ng-controller="moduloJogosCTRL">

  <tr ng-repeat="partida in partidas">
    <td class="timeCasa">{{partida.timeCasa}}</td>
    <td class="tdAposta"><input type="button" class="btn" id="{{casa + partida.idPartida + partida.cotTimeC}}" value="{{partida.cotTimeC}}"/></td>
    <td class="tdAposta"><input type="button" class="btn" id="{{empate + partida.idPartida + partida.cotEmp}}" value="{{partida.cotEmp}}"/></td>
    <td class="tdAposta"><input type="button" class="btn" id="{{fora + partida.idPartida + partida.cotTimeF}}" value="{{partida.cotTimeF}}"/></td>
    <td>{{partida.timeFora}}</td>
  </tr>

</tbody>

PHP that takes the information and mounts the json:

$partidasTotais = "[";

while($jogos = $select->fetch(PDO::FETCH_ASSOC)) {

  $timeCasa = $jogos['time_casa'];
  $timeFora = $jogos['time_fora'];
  $idMatch = $jogos['id_jogo'];


  $content = $chamaURL->retornaConteudo('https://api.soccerama.pro/v1.2/odds/match/'.$idMatch.'?api_token='.$apiTOKEN);
  $cotCasa = $content["data"]["0"]["types"]["data"]["0"]["odds"]["data"]["0"]["value"];
  $cotEmp = $content["data"]["0"]["types"]["data"]["0"]["odds"]["data"]["2"]["value"];
  $cotFora = $content["data"]["0"]["types"]["data"]["0"]["odds"]["data"]["1"]["value"];

  $partidaIndividual = '{"timeCasa":'. $timeCasa.',"timeFora":'. $timeFora.',"idPartida":'. $idMatch.',"cotTimeC":'. $cotCasa.',"cotEmp":'. $cotEmp.',"cotTimeF":'. $cotFora.'},';

$partidasTotais .= $partidaIndividual;


}

$partidasTotais .= "]";

echo json_encode($partidasTotais);

Answer 1

This usually happens when you don’t have a unique id for ng-repeat, you can, according to documentationthe, use track by $index that will make the position inside the array become the ID and I recommend you also check if it has no elements Undefined inside your $scope.partidas.

Make some changes:

• Puts $i = 0; before the while;

• Change your assignment code as follows:

  if($i == 0) $partidaIndividual = '{"timeCasa":"'. $timeCasa.'","timeFora":"'. $timeFora.'","idPartida":"'. $idMatch.'","cotTimeC":"'. $cotCasa.'","cotEmp":"'. $cotEmp.'","cotTimeF":"'. $cotFora.'"}';
  else $partidaIndividual = ', {"timeCasa":"'. $timeCasa.'","timeFora":"'. $timeFora.'","idPartida":"'. $idMatch.'","cotTimeC":"'. $cotCasa.'","cotEmp":"'. $cotEmp.'","cotTimeF":"'. $cotFora.'"}'; 
  

• At the end of the iteration puts the $i++;

• Brackets are required not to remove them.