AngularJS Group By object property

Question

I have this object:

  $scope.items = [{ 
    "category": { "code": "10", "description": "Movies" },
        "item": {"code": "421", "description": "Noriko's Dinner Table" }
                  },{ 
    "category": { "code": "10", "description": "Movies" },
        "item": {"code": "511", "description": "Avatar" }
                  },{ 
    "category": { "code": "45", "description": "Books" },
        "item": {"code": "93", "description": "Divergent" }
                  },{ 
    "category": { "code": "45", "description": "Books" },
        "item": {"code": "72", "description": "Sense and Sensibility" }
                  },{ 
    "category": { "code": "33", "description": "TV Shows" },
        "item": {"code": "11", "description": "The Walking Dead" }
                  },{ 
    "category": { "code": "33", "description": "TV Shows" },
        "item": {"code": "60", "description": "The Bates Motel" }
                  }];

and I am trying to group them so that the list can be neatly organized and viewable. Like this:

But as you can see, the category description appears on every item. What do I do?

  <ul>
    <li ng-repeat="item in items track by $id(item)"><div>{{item.category.description}}</div>{{item.item.description}}</li>
  </ul>

LIVE DEMO: http://plnkr.co/edit/mjek9xPo3ihBTiwW6U0V?p=preview

Im confused - the plunker looks exactly like what you said you are trying to achieve — Maxwelll
– Maxwelll, Commented Apr 4, 2016 at 16:08

ajmajmajma · Accepted Answer · 2016-04-04 16:13:59Z

3

You want to do something like this :

<ul ng-repeat="(key, value) in items | groupBy: 'category.description'">
 {{ key }}
   <li ng-repeat="item in value">
     {{ item.item.description }} 
   </li>
</ul>

Take advantage of angulars built in groupBy and filter.

answered Apr 4, 2016 at 16:13

ajmajmajma

14.3k25 gold badges83 silver badges139 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Group By object property

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related