AngularJS: ng-repeat without similar key

Question

I have list of objs:

[{
 key:test1
 name: name1
},
{
 key:test1
 name: name2
},
{
 key:test2
 name: name3
}]

And i use ng-repeat to display it:

<tr ng-repeat=item in list>
  <td>{{item.key}}</td>
  <td>{{item.name}}</td>
</tr>

Is it possible to combine values with similar keys without changing the structure? not to be displayed twice test1 in my case

now:

test1 : name1

test1 : name2

test2 : name3


desired result:

test1 : name1

_____  name2

test2 : name3

Possible duplicate of [Remove Duplicates from JavaScript Array](https://stackoverflow.com/questions/9229645/remove-duplicates-from-javascript-array) — Sangwin Gawande, Sep 22 '17 at 10:54

Slava Utesinov · Accepted Answer · 2017-09-22T11:13:29.290

You can use groupBy filter:

angular.module('app', ['angular.filter']).controller('ctrl', function($scope){
  $scope.list = [{
     key:'test1',
     name: 'name1'
    }, {
     key:'test1',
     name: 'name2'
    },{
     key:'test1',
     name: 'name3'
    },{
     key:'test2',
     name: 'name4'
    }];
})

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>

<table ng-app='app' ng-controller='ctrl'>
  <tbody>
    <tr ng-repeat-start="(key, value) in list | groupBy: 'key'">      
      <td>{{key}}</td>
      <td>{{value[0].name}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat='item in value.splice(1)'>
      <td></td>
      <td>{{item.name}}</td>
    </tr>
  </tbody>
</table>

Do know how can get $index from this group to get current item of list? — Lola, Sep 22 '17 at 11:39
index within group: `$index`; index within whole list: `list.indexOf(item)` — Slava Utesinov, Sep 22 '17 at 12:01

score 1 · Answer 2 · answered Sep 22 '17 at 10:53

1

ng-repeat="item in list | unique:'key'"

answered Sep 22 '17 at 10:53

Ravi Teja

649
7
17

score 1 · Answer 3 · answered Sep 22 '17 at 11:06

Here is how you can achieve the common key value in a same place using angular-filter:

angular.module('app',['angular.filter']).controller('mainCtrl', function($scope){$scope.list = [{
       key:'test1',
       name: 'name1'
      },
      {
       key:'test1',
       name: 'name2'
      },
      {
       key:'test2',
       name: 'name3'
      }]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>


<div ng-app='app' ng-controller='mainCtrl'>
    <div ng-repeat="(key, value) in list | groupBy: 'key'">
      <span ng-repeat='val in value'>{{val.name}} </span>
    </div>     
</div>

Md. Al-Amin · Answer 4 · 2017-09-22T11:32:54.983

0

Before using ng-repeat update the list.

function rd(o, k, v) {
   var n = [];
   var l  = {};

   for(var i in o) {
      if (l.hasOwnProperty(o[i][k])){
         o[i][v] =  l[o[i][k]][v]+ " " +  o[i][k]
         l[o[i][k]] = o[i]
      } else{
         l[o[i][k]] = o[i];
      }
   }

   for(i in l) {
      n.push(l[i]);
   }
   return n;
}

var list = rd(arr, "key", "name");

edited Sep 22 '17 at 11:32

answered Sep 22 '17 at 11:07

Md. Al-Amin

1,423
1
13
26

score 0 · Answer 5 · answered Sep 22 '17 at 11:45

You can try this:

var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
    $scope.items = [{
     "key":"test1",
     "name": "name1"
    },
    {
     "key":"test1",
     "name": "name2"
    },
    {
     "key":"test2",
     "name": "name3"
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="item in items | groupBy: 'key'">
     <h3>Key : {{item[0].key}}</h3>
      <p>Names : <span ng-repeat='i in item'>{{i.name}} </span></p>
    </div> 
</div>

AngularJS: ng-repeat without similar key

5 Answers5