2

Estou com um problema de valores duplicados no AngularJS, no meu JSON vai ter sempre categorias repetidas, no ng-repeat eu usei o track by $index mas o erro persistiu.

O código do meu controller:

angular.module('starter').controller('Guia', function($scope, $http) {
  var grp = {};
  $http.get('js/lugares.json').success(function(data) {
    $scope.categories = data;
    angular.forEach($scope.categories, function(item){
        var chr = item.categoria.charAt(0);
        if(!grp.hasOwnProperty(chr)) grp[chr] = [];
        grp[chr].push(item.categoria);
     })
  });
  $scope.grp = grp;
});

Meu HTML está assim:

<div class="list" ng-repeat="(k,v) in grp track by $index">
  <div class="item item-divider">{{k}}</div>
  <a ng-href="#/categoria-guia" class="item" ng-repeat="i in v">{{i}}</a>
</div>

E o JSON assim:

[
  {
    "id": 0,
    "nome": "Agência MegaDigital",
    "categoria": "Tecnologia e Informática"
  },
  {
    "id": 1,
    "nome": "Bar do Grego",
    "categoria": "Bares e Restaurantes"
  },
  {
    "id": 2,
    "nome": "Anselmo Lanches",
    "categoria": "Bares e Restaurantes"
  },
  {
    "id": 3,
    "nome": "Internet de Dimas",
    "categoria": "Tecnologia e Informática"
  },
  {
    "id": 4,
    "nome": "Banca Caixa Postal",
    "categoria": "Banca de Revista"
  },
  {
    "id": 5,
    "nome": "Xerox Central",
    "categoria": "Papelaria e Escritório"
  }
]

O resultado final exibe uma lista de todas as categorias numa lista ordenada pela letra inicial da categoria.

2
  • O único problema que estás a ter é a ordenação pela letra inicial? 27/07/2016 às 21:40
  • Não, em relação a ordenação eu já consegui fazer e está tudo certo, o problema é que como tenho categorias repetidas, aparece esse erro aqui: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. 27/07/2016 às 21:43

1 Resposta 1

1

Altemberg, pelo que posso ver, você está utilizando um objeto var grp = {}; que possui um array grp[chr] = [].

Você criou no objeto grp, uma chave b que recebe a categoria dentro de uma array, resultaria em algo como isto:

 grp = {
     b: ["Banca de Revista", "Bares e Restaurantes"], // ** Array **
     p: ["Papelaria e Escritório"],
     t: ["Tecnologia e Informática"]
 }

Até aí tudo bem, agora vamos resolver o problema da repetição:

 if(grp[chr].indexOf(item.categoria) === -1) grp[chr].push(item.categoria)
 // Só acrescentar o novo valor se ele ainda não existir

Funcionando:

var app = angular.module('myApp', [])

app.controller('myCtrl', function($scope, $http) {
  var grp = {}; 
  var data = [{
    "id": 0,
    "nome": "Agência MegaDigital",
    "categoria": "Tecnologia e Informática"
  }, {
    "id": 1,
    "nome": "Bar do Grego",
    "categoria": "Bares e Restaurantes"
  }, {
    "id": 2,
    "nome": "Anselmo Lanches",
    "categoria": "Bares e Restaurantes"
  }, {
    "id": 3,
    "nome": "Internet de Dimas",
    "categoria": "Tecnologia e Informática"
  }, {
    "id": 4,
    "nome": "Banca Caixa Postal",
    "categoria": "Banca de Revista"
  }, {
    "id": 5,
    "nome": "Xerox Central",
    "categoria": "Papelaria e Escritório"
  }];
  $scope.categories = data; 
  angular.forEach($scope.categories, function(item) {
    var chr = item.categoria.charAt(0);
    if (!grp.hasOwnProperty(chr)) grp[chr] = []; // Criando uma chave no OBJETO (chr), e essa chave possui um ARRAY
    if(grp[chr].indexOf(item.categoria) === -1) grp[chr].push(item.categoria); // Ainda utilizando o array
  })
  $scope.grp = grp;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="list" ng-repeat="(k,v) in grp">
    <div class="item item-divider">{{k}}</div>
    <br>
    <a ng-href="#/categoria-guia" class="item" ng-repeat="i in v">{{i}}<br></a>
  </div>
</div>

7
  • Samir, apareceu o seguinte erro: [orderBy:notarray] Expected array but received: {} Vou editar minha pergunta acima e colocar também o código do controller para você ter uma noção melhor do meu problema, tudo bem? 27/07/2016 às 21:50
  • @AltembergAndrade, fica bem melhor mesmo. 27/07/2016 às 21:51
  • já fiz a edição, dê olhadinha aí por favor. 27/07/2016 às 22:01
  • @AltembergAndrade, olhe a edição, veja se ficou claro 27/07/2016 às 22:01
  • 1
    Agora foi! E consegui entender o código melhor agora kkkk. Muito obrigado, Samir. 27/07/2016 às 23:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .