Error with duplicate values in AngularJS

Question

Error with duplicate values in AngularJS

Navigation

#1 by (1 votes)

2

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

My controller code:

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 looks 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 JSON like this:

[
  {
    "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 letter of the category.

javascript angularjs json

asked by anonymous 27.07.2016 / 23:32

1 answer

Send data from a dynamic table via ajax JAVACV with maven?

score 1 · Accepted Answer

Altemberg, as far as I can see, you are using a var grp = {}; object that has a grp[chr] = [] array.

You created on 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

Running:

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