Advanced filtering with AngularJS

Question

I'm looking to filter the following list with AngularJS by both category and location. The difficulty I'm having is being able to properly nest the results beneath their respective categories (see below) after the filtering has occurred.

var jobs = [
    {
        title: "Software Engineer",
        category: "Engineering",
        location: "New York"
    },
    {
        title: "Web Developer",
        category: "Engineering",
        location: "Chicago"
    },
    {
        title: "UX Designer",
        category: "Design",
        location: "New York"
    }
]

This is the desired output (also note the alphabetically ordered categories):

Design
UX Designer

Engineering
Software Engineer
Web Developer

Any help would be much appreciated. Thanks!

Related: http://stackoverflow.com/q/19992090/2592994 – calebboyd Mar 13 '14 at 19:43 — calebboyd, Mar 13 '14 at 19:43

score 0 · Answer 1 · answered Mar 13 '14 at 19:18

0

Do you have something like this in your mind:

  <b>Design</b>
  <ul>
      <li ng-repeat="job in jobs | filter: { category:'Design'}">
        {{job.title}}
      </li>
  </ul>
  <b>Engineering</b>
  <ul>
      <li ng-repeat="job in jobs | filter: { category:'Engineering'}">
        {{job.title}}
      </li>
  </ul>

There is working JSFiddle.

answered Mar 13 '14 at 19:18

PrimosK

13,848
10
60
78

I've, thought of something like this, but I don't want to need additional markup for every new category that gets added. – Steven G. Mar 14 '14 at 13:45
Then I would suggest making set of categories and iterate trough them with the use of `ng-repeat`. – PrimosK Mar 14 '14 at 13:51

score 0 · Answer 2 · answered Mar 13 '14 at 19:40

I would re-structure my JSON as follows:

  $scope.parsedJobs = [];
  angular.forEach($scope.jobs, function(value, key) {
    var j = $scope.parsedJobs.filter(function(element) {
      return element.category == value.category;
    });
    if (j.length > 0) {
      $scope.parsedJobs[0].elements.push({
        title: value.title, 
        location: value.location
      });
    } else {
      $scope.parsedJobs.push({
        category: value.category,
        elements: [{
          title: value.title, 
          location: value.location
        }]
      });
    }
  });

Fiddle

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

Here is a working example with your data on plnkr using the filter solution from AngularJS Group By Directive without External Dependencies:

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

edited May 23 '17 at 11:57

Community

1
1

answered Mar 13 '14 at 23:22

chr1s1202

477
2
8

Exactly, what I needed - thanks a million! Do you know if this will create any limitations with filtering the list? – Steven G. Mar 14 '14 at 14:14
No there are no limitations with filter. Updated the plnkr with applied filter "New York" on location. `
`
– chr1s1202 Mar 14 '14 at 14:25

Advanced filtering with AngularJS

3 Answers3