Error with duplicate values in Angularjs

Question

I have a problem of duplicate values in Angularjs, in my JSON will always have repeated categories, in ng-repeat I used the track by $index but the error persisted.

The code of my 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;
});

My HTML is like this:

<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>

And the JSON so:

[
  {
    "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"
  }
]

The final result displays a list of all categories in a list sorted by the initial category letter.

Answer 1

Altemberg, from what I can see, you’re using an object var grp = {}; that has an array grp[chr] = [].

You created in the object grp, a key b that receives the category within an array, would result in something like this:

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

So far so good, now let’s solve the problem of repetition:

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

Working:

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>