How To Group Data By Year and Month using AngularJS' $filter

Question

So I have the following dataset that I would like to group/aggregate by Year, Month using the dateObject property.

Dataset

$scope.dataSet = [
    {
        _id :   58b57e442bf752389a940fea,
        time    :   01:39 PM,
        status  :   Submitted,
        date    :   2017-02-28T13:39:34.955Z,
        dateObject      : {
            dayOfTheMonth   :   28,
            dayOfTheWeek    :   Tuesday,
            month   :   February,
            year    :   2017
        }
    },
    {
        _id :   58b57e442bf9820389a940fea,
        time    :   05:18 PM,
        status  :   Submitted,      
        date    :   2014-02-28T13:39:34.955Z,
        dateObject      : {
            dayOfTheMonth   :   28,
            dayOfTheWeek    :   Tuesday,
            month   :   February,
            year    :   2014
        }
    },
    {
        _id :   58b57e442bf9820389a940fea,
        time    :   05:55 AM,
        status  :   Processing,     
        date    :   2016-03-18T13:39:34.955Z,
        dateObject      : {
            dayOfTheMonth   :   18,
            dayOfTheWeek    :   Friday,
            month   :   March,
            year    :   2016
        }
    }
]

Here is how I would like to structure the data after aggregating it:

[
    {
        '2017' : [
            'March' : [
                {
                    _id :   58b57e442bf752389a940fea,
                    time    :   01:39 PM,
                    status  :   Submitted,
                    date    :   2017-02-28T13:39:34.955Z,
                    dateObject      : {
                        dayOfTheMonth   :   28,
                        dayOfTheWeek    :   Tuesday,
                        month   :   February,
                        year    :   2017
                    }
                }
            ]
        ]
    },
    {
        '2016' : [
            'February' : [
                {
                    _id :   58b57e442bf9820389a940fea,
                    time    :   05:55 AM,
                    status  :   Processing, 
                    date    :   2016-03-18T13:39:34.955Z,
                    dateObject      : {
                        dayOfTheMonth   :   18,
                        dayOfTheWeek    :   Friday,
                        month   :   March,
                        year    :   2016

                    }
                }
            ]
        ]
    },
    {
        '2014' : [
            'February' : [
                {
                    _id :   58b57e442bf9820389a940fea,
                    time    :   05:18 PM,
                    status  :   Submitted,  
                    date    :   2014-02-28T13:39:34.955Z,
                    dateObject      : {
                        dayOfTheMonth   :   28,
                        dayOfTheWeek    :   Tuesday,
                        month   :   February,
                        year    :   2014

                    }
                }
            ]
        ]
    }
]  

$scope.dataByYear = $filter('groupBy')($scope.dataSet, 'dateObject.year')
$scope.dataByMonth = $filter('groupBy')($scope.dataSet, 'dateObject.month')

When using $filter from AngularJS (As seen above), I am able to group the dataset by year or by month. My problem is that I would like to group the dataset by Year and Month. How can I achieve that?

groupBy [dateObject.year, dateObject.month]

Alon
– Alon

2017-03-12 23:34:17 +00:00
Commented Mar 12, 2017 at 23:34 — Alon
– Alon, Commented Mar 12, 2017 at 23:34

Slava Utesinov · Accepted Answer · 2017-03-13 12:01:51Z

1

Try to use groupBy filter:

(function(angular) {
  'use strict';
var myApp = angular.module('app', ['angular.filter']);

myApp.controller('MyController', ['$scope', '$filter', function($scope, $filter) {        
    var dataSet = [
      {_id:'1', dateObject:{year:2001,month:'February'}},
      {_id:'2', dateObject:{year:2001,month:'February'}},
      {_id:'3', dateObject:{year:2001,month:'April'}},
      {_id:'4', dateObject:{year:2001,month:'April'}},
      {_id:'5', dateObject:{year:2003,month:'October'}},
      {_id:'6', dateObject:{year:2003,month:'October'}},
      {_id:'7', dateObject:{year:2003,month:'April'}}
    ];    
        
    var filter = $filter('groupBy');
    $scope.answer = filter(dataSet, 'dateObject.year');
    for(var key in $scope.answer)
        $scope.answer[key] = filter($scope.answer[key], 'dateObject.month');
    
}]);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.15/angular-filter.js"></script>

<body ng-app="app">
  <div ng-controller="MyController">
 <li ng-repeat="(key, value) in answer | orderBy: 'key'">
   Year: {{key}}   
     <ul>
      <li ng-repeat="(key2, value2) in value | orderBy: 'key2'">      
         Month: {{key2}}   
         <ul>
          <li ng-repeat="item in value2 | orderBy: '_id'">      
             {{item._id}}   
          </li>
        </ul>   
      </li>
    </ul>
 </li>
</div>
</body>

edited Mar 13, 2017 at 12:01

answered Mar 13, 2017 at 5:52

Slava Utesinov

13.5k2 gold badges21 silver badges26 bronze badges

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

1 Comment

AllJs Over a year ago

Hi @slava. Thanks for your answer. My issue is that I would like to transform the dataset from the raw data to the year&month dataset. I know it's possible to do it via html, but that's not exactly what I was looking for. But it helps tho.

Collectives™ on Stack Overflow

How To Group Data By Year and Month using AngularJS' $filter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related