CODEWITHSUNDEEP
angularjs
runners3431
runners3431

Reputation: 1455

how to display based on a object's key in angularjs

In angular, if i have an object such as : 

[{
  id : 1, 
  subject : BIO, 
  class : '101' , 
  time : 'mon'
 },
 {
  id : 2, 
  subject : BIO, 
  class : '101', 
  time : 'tues' 
 },
 { 
  id : 3, 
  subject : MTH, 
  class : '101-00', 
  time : 'wed'
 },
 {
  id : 4, 
  subject : MTH, 
  class : '101',
  time : 'tues'
 },
 {
  id : 5, 
  subject : BIO, 
  class : '102', 
  time : 'sat' 
 },

And I wanted to display all of the results underneath each subject title, is there a directive I can use or something I need to whip up?

Is there way to output based on key value pair by category?

so my output would be

BIO

All class numbers and time.

MTH

All math classes.

Upvotes: 0

Views: 45

Answers (2)

Claies
Claies

Reputation: 22323

The easiest way to do this would be to use a filter over ng-repeat. Something like the following:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.classes = [{
    id: 1,
    subject: 'BIO',
    class: '101',
    time: 'mon'
  }, {
    id: 2,
    subject: 'BIO',
    class: '101',
    time: 'tues'
  }, {
    id: 3,
    subject: 'MTH',
    class: '101-00',
    time: 'wed'
  }, {
    id: 4,
    subject: 'MTH',
    class: '101',
    time: 'tues'
  }, {
    id: 5,
    subject: 'BIO',
    class: '102',
    time: 'sat'
  }, ]
});
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  BIO:
  <div ng-repeat="class in classes | filter: 'BIO'">
    {{class.subject}} {{class.class}} {{class.time}}
  </div>
  <hr> MTH:
  <div ng-repeat="class in classes | filter: 'MTH'">
    {{class.subject}} {{class.class}} {{class.time}}
  </div>
  <hr> ALL:
  <div ng-repeat="class in classes">
    {{class.subject}} {{class.class}} {{class.time}}
  </div>
</body>

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

I added the groupBy filter to the mix to show the difference, from the answer by @DmitryVasiliev

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

Upvotes: 0

Dmitry Vasiliev
Dmitry Vasiliev

Reputation: 1583

You can use "groupBy" filter from angular-filter library which does exactly what you need: https://github.com/a8m/angular-filter#groupby

Upvotes: 2

Related Questions