Angularjs tabs only for unique array elements using ng-repeat

Question

I am new to Angularjs, so please bear with me. I have a response object where there are info some exam centers. In the response object the centers are from multiple cities. I want to create a bootstrap tab structure using Angularjs where all common city names will show as the tab header and all the centers under each city will come as tab content.

I am unable to figure out how should I go about it in Angularjs to display just the common city names as the tab header instead of showing all by using simple ng-repeat with some filter.

Sample response:

    [{
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Delhi",
       "location": "xyz, Delhi",
       "logo": ""
     },
     {
       "_id": "xx67888875ggg",
       "name": "Center Name",
       "city": "Mumbai",
       "location": "xyz, Mumbai",
       "logo": ""
     },
     {
       "_id": "xx6733335ggg",
       "name": "Center Name",
       "city": "Kolkata",
       "location": "xyz, Kolkata",
       "logo": ""
     },
     {
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Delhi",
       "location": "xyz, Delhi",
       "logo": ""
     },
     {
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Mumbai",
       "location": "xyz, Mumbai",
       "logo": ""
     }]

So here the tabs will show only tabs for Delhi, Mumbai, Kolkata once instead of two tabs for mumbai and Delhi.

Possible duplicate of [How to get distinct values from an array of objects in JavaScript?](https://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript) Filter the array in JavaScript first, then pass it to AngularJS. — jmbmage, Oct 05 '18 at 13:51

score 1 · Accepted Answer · answered Oct 06 '18 at 06:40

Modify the value into nested level(first city and then state). Now you can just do ng-repeat over them.

I wrote a sample html how to use it.

<div>
 <div ng-repeat="(key,val) in res" ng-click="show=!show">
    <div>{{key}}</div>
    <div ng-show="show" ng-repeat="center in res[val]">{{center.name}}</div>
 </div>
</div>

var arr  = [{
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Delhi",
       "location": "xyz, Delhi",
       "logo": ""
     },
     {
       "_id": "xx67888875ggg",
       "name": "Center Name",
       "city": "Mumbai",
       "location": "xyz, Mumbai",
       "logo": ""
     },
     {
       "_id": "xx6733335ggg",
       "name": "Center Name",
       "city": "Kolkata",
       "location": "xyz, Kolkata",
       "logo": ""
     },
     {
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Delhi",
       "location": "xyz, Delhi",
       "logo": ""
     },
     {
       "_id": "xx67576575ggg",
       "name": "Center Name",
       "city": "Mumbai",
       "location": "xyz, Mumbai",
       "logo": ""
     }]

var res= {}

arr.forEach((a) => {
  if(typeof res[a.city] === 'undefined') {
 res[a.city] = [a]
  } else {
    res[a.city].push(a)
  }
})
console.log(res)

Angularjs tabs only for unique array elements using ng-repeat

1 Answers1