AngularJS groupBy orderBy

Question

Using angular.filter i am using groupBy and length to give me a count of the number of records logged by the user emailId

           <div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId'">
                 <h3>{{ key }} {{ filteredList.length}}</h3>
                 <li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
           </div>

This all works fine giving me a list of emailIds, the number of records for each emailId and the records listed underneath.

What I a trying to do is to order the data by the number of records for each emailId (in other words order the data by the value returned by {{ filteredList.length}}).

I have tried adding orderBy to the ng-repeat as below

      <div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId' | orderBy: filtered.length">
             <h3>{{ key }} {{ filteredList.length}}</h3>
             <li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
       </div>  

but this does not make any difference to the order the items are listed. I have had a look for an existing answer but all of the orderBy not working with groupBy seem to refer to ordering by an item contained in the value not the length of the filter.

Answer 1

the user group of angular-filter have written what needs to be done at below link: https://github.com/a8m/angular-filter/issues/57#issuecomment-65041792

groupBy returns an object but orderBy fiter expects an array. So use toArray:true and give orderBy an array to work with.

Below is the code that must work:

   <div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId' | toArray: true |orderBy: filtered.length">
         <h3>{{ key }} {{ filteredList.length}}</h3>
         <li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
   </div>

Also, keep in mind that orderBy must be the last filter in the chaining.

Edit

You can also switch places of orderBy and groupBy. If OrderBy filter is in the first place it sorts and after that groupBy filter initializes without toArray filter

Example:

<div ng-repeat="(key, value) in array | orderBy: filtered.length | groupBy: 'emailId'">
             <h3>{{ key }} {{ filteredList.length}}</h3>
             <li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
       </div>