CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-filter
Joe82
Joe82

Reputation: 1251

Angularjs: Ng-repeat and unique filter in array

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.

Upvotes: 1

Views: 1873

Answers (2)

ippi
ippi

Reputation: 10177

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

Upvotes: 0

prograde
prograde

Reputation: 2740

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.

Upvotes: 2

Related Questions