AngularJS - Group by array

Question

I have a scope array of locations, each location can be in one or more categories.
For eaxmple:

Locations: [{id: 1,
  name: "NJ",
  categories: [0, 2, 3]
},{
  id: 2,
  name: "NY",
  categories: [0, 2]
}]

Categories: [{
  id: 0,
  name: "Cities"
}, {
  id: 2,
  name: "Canyons"
}, {
  id: 3,
  name: "Work"
}]

In my app I display all of the locations with this code:

<div ng-repeat="row in rows">
    {{ row.name }}<br>
    Categories: <span enum-categories="row"></span>
</div>

Now I want to add the option to group the items by their categories..
My problem is that each item can have more than one category..

The result need to be something like this:

cat 0:
NJ, NY

cat 1:
Nothing

cat 2:
NJ, NY

cat 3:
NJ

How can I do this?
Thank you :)

charlietfl · Accepted Answer · 2015-09-20 16:56:17Z

1

This custom filter does what you need

app.filter('locByCatFilter', function() {
  return function(locations, catId) {
    if (!locations || !catId) {
      return;
    }
    return locations.filter(function(loc) {
      return loc.categories.indexOf(catId) > -1;
    });
  }
})

Usage:

<ul>
  <li ng-repeat ="cat in Categories">
      Category: {{cat.name}}
      <ul>
        <li ng-repeat="loc in filteredLoc =(Locations | locByCatFilter:cat.id)">
          {{loc.name}}
        </li>
        <li ng-if="!filteredLoc.length">None</li>
      </ul>
  </li>
</ul>

If you wanted to use groupBy you would need to map your data first and create duplicates I believe

DEMO

answered Sep 20, 2015 at 16:56

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

victor175 · Accepted Answer · 2015-09-20 18:04:29Z

0

Awkay, what you need to do is a custom filter:

<div ng-repeat="category in categories">
    {{ category.id }}<br>
    Locations: 
  <span enum-categories="row" 
    ng-repeat="location in filteredLocations =
                (locations | filter:hasCategory(category.id))">

    {{ location.name }}
  </span>
  <p ng-hide="filteredLocations.length">Nothing</p>
</div>

And in your JS:

yourModule.filter('hasCategory', function(){
    return function(location, categoryId) {
        if(location.categories.indexOf(categoryId) != -1) {
          return location;
        }
    };
});

edited Sep 20, 2015 at 18:04

answered Sep 20, 2015 at 15:56

victor175

6243 gold badges10 silver badges24 bronze badges

3 Comments

Yehuda Over a year ago

It's not what I'm looking for.. I want to group by the categories, not to enumerate the categories..

victor175 Over a year ago

@Yehuda let me see if I get it right - you want to output the locations for each category?

Yehuda Over a year ago

Yes, and it need to be dynamic.. By default it's output list of locations and if the user click a button than it will output the same list but grouping by the categories

Collectives™ on Stack Overflow

AngularJS - Group by array

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related