7

I have a JSON object representing calendar dates. These are added through a CMS and I'd like to be able to filter them based on date. My schema set-up has made this more difficult than I thought. Is it possible to orderBy the day value in this JSON object or is there a filter workaround?

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. The orderBy is not functioning but I've left it in as a placeholder to show where I'd 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 -->
||||||
16

You should be able to define a custom sort function that sorts by any item in your object. The key bit is to convert the object to an array in the filter function.

Here's 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;
  };
});

You would then call it like this:

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

Note, you shouldn't write val.day as that is assumed.

Look at this great blog post here for more info.

EDIT: In fact, it looks like your structure is actually already an array, so while this technique will still work, it may not be necessary - it might have just been the way you were adding the parameter to orderBy that was causing issues.

||||||
  • Did you mean to write orderByDayNumber in the filter instead of orderBy? – General_Twyckenham Aug 19 '14 at 3:13
  • It's not working with my app. The logic makes sense though, I'll post the answer when I figure out why it isn't working. – byrdr Aug 19 '14 at 3:26
  • it looks like I'm returning lines of objects. 'item' returns {"day":"21","title":"ok","summary":"ok","description":"ok","_id":"53ee9f0fc6aed109c6d33cfd"}. Would it be possible to push these into an array to filter from? – byrdr Aug 19 '14 at 3:55
  • If you could put up a plnkr or a jsfiddle up with the data, then I'll see if I can get it working. The easiest way to do this is to find a plnkr or jsfiddle with a working codebase and fork it and add your changes. Try this one: jsfiddle.net/rapsac/sfzt3562 – Caspar Harmer Aug 19 '14 at 5:31
  • I've added a jsfiddle...my scope variables are not returning for some reason right now, but this is the gist of the app. jsfiddle.net/rtbyrd21/sfzt3562/21 – byrdr Aug 19 '14 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.