CODEWITHSUNDEEP
javascriptangularjs
Pallavi Dwivedi
Pallavi Dwivedi

Reputation: 196

Angularjs tabs only for unique array elements using ng-repeat

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.

Upvotes: 0

Views: 159

Answers (1)

sridhar..
sridhar..

Reputation: 2133

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)

Upvotes: 1

Related Questions