Angular orderBy object possible?

Question

I have a JSON object representing calendar dates. They are added via CMS, and I would like to be able to filter them by date. My circuit setup made it harder than I thought. Is it possible to order the day value in this JSON object, or is there a filter bypass?

Here is my JSON object:

{ "_id" : ObjectId("53f252537d343a9ad862866c"), "year" : { "December" : [], "November" : [], "October" : [], "September" : [], "August" : [], "July" : [ { "day" : "21", "title" : "Event Title", "summary" : "Event Summary", "description" : "oEvent Description", "_id" : ObjectId("53f252537d343a9ad862866d") } ], "June" : [], "May" : [], "April" : [], "March" : [], "February" : [], "January" : [] }, "__v" : 0 } 

Here is my view, which already uses a custom filter to filter by month. OrderBy does not work, but I left it as a placeholder to show where I would like to set the functionality.

 <div class="calDynamic" data-ng-repeat="n in [] | range:100"> <div ng-repeat="cal in calendar[n].year | filterKey:month"> <div ng-if="cal != '' "> <div class="calendar"> <div ng-repeat="item in cal | orderBy: 'key.day' "> <a href="/events/{{item.day}}"> <article class="eventslist"> <div class="numberedDate"> <h3>{{item.day}}</h3> </div> <div class="calInfo"> <h5>{{item.title}}</h5> <p>{{item.summary}}&nbsp;<a>more</a></p> </div> </article> </div><!-- ng-repeat val,key --> </div><!-- calendar --> </div><!-- ng-if cal --> </div><!-- ng-repeat cal --> </div><!-- calDynamic --> 

Answer 1

You should be able to define a custom sort function that sorts by any element of your object. The key bit is converting an object into an array into a filter function.

Here is an example:

 app.filter('orderByDayNumber', function() { return function(items, field, reverse) { var filtered = []; angular.forEach(items, function(item) { filtered.push(item); }); filtered.sort(function (a, b) { return (a[field] > b[field] ? 1 : -1); }); if(reverse) filtered.reverse(); return filtered; }; }); 

Then you call it like this:

 <div ng-repeat="(key, val) in cal | orderByDayNumber: 'day' "> 

Please note: you should not write val.day as intended.

Check out this great blog post here for more information.

EDIT . Actually, it looks like your structure is actually already an array, so although this method will still work, it might not be needed - perhaps this is how you added the orderBy parameter, which causes problems.