Angularjs: Ng-repeat and unique filter in array

Question

I have a set of data like this

$scope.students = [
   { name:"John", courses:["Math", "Physics", "Chemistry"] },
   { name:"Paul", courses:["Economics", "Math", "Sociology"] }
]

I would like a way to filter using angular-filter so that I can get a list of all the subjects without repetition. I've been trying to use unique filter, but I cannot get it to work since I try to iterate like

<ul ng-repeat="student in students">
   <li ng-repeat="x in student.courses | unique:courses"></li>
       {{x}}
</ul>

My desired output of the first ng-repeat would be an array like this:

["Math", "Physics", "Chemistry", "Economics", "Sociology"]

so I could iterate through it in the second one.

I have achieved this throught making a new scope with just the desired array, but then I cannot bind it properly, so I would like to achieve it through filtering. Thanks in advance.

Possible duplicate of [How to make ng-repeat filter out duplicate results](http://stackoverflow.com/questions/15914658/how-to-make-ng-repeat-filter-out-duplicate-results) — martin, Feb 28 '16 at 23:33
You can use the library: https://github.com/angular-ui/angular-ui/blob/master/modules/filters/unique/unique.js. Btw, `ng-repeat` must be used exclusively in the `
@Martin, it is not the same case, as I unique:courses doesn't work if courses refers to an array — Joe82, Feb 29 '16 at 09:05
@developer033, yes, that's exactly what I want to use, but I don't know how to achieve that :) — Joe82, Feb 29 '16 at 09:06

prograde · Accepted Answer · 2016-02-28T23:31:01.493

2

I would really recommend you using the libraries Lodash or Underscore for this kind of problems. Learning to master these has helped me a lot!

Of course, you can create your own angular filter using one of them. The method you would like to use is union:

_.union(_.flatten(_($scope.students).pluck("courses")))

I use pluck to get out the courses arrays from the studens object, then I flatten the result (to get rid of the array that it comes nested in), and then i use union to get each subject only once.

edited Feb 28 '16 at 23:31

answered Feb 28 '16 at 23:18

prograde

2,620
2
23
32

I didn't know that I could easily create my own custom filter. This make my day :) – Joe82 Feb 29 '16 at 09:19

ippi · Answer 2 · 2016-02-29T02:52:41.833

If the requirement actually is to:

...get a list of all the subjects without repetition.

Then I would make a separate array for subjects:

$scope.courses = [];

// There are many ways to do skin this cat... (prograde does have a point!)
$scope.students.forEach(function(student) {
  student.courses.forEach(function(course) {
    if ( $scope.courses.indexOf(course) === -1 ) {
      $scope.courses.push(course);
    }
  })
});

HTML

<ul>
  <li ng-repeat="course in courses">
    {{ course }}
  </li>
</ul>

And if the students change I would recreate the courses-array.

But it sounds as if you are trying to do something else.

But it doesn't give the desired output.

It would help if you tell us what that desired output is!

http://plnkr.co/edit/bZNjIEFznvuyTU3zxAp1?p=preview

I edited the question. The output with your solution is correct, but I don't want to have a separate scope for this as later I cannot bind it to the other one through ng-model. — Joe82, Feb 29 '16 at 09:10

Angularjs: Ng-repeat and unique filter in array

2 Answers2