0

Alright, I've been stuck on this one for a while and can't find an adequate solution out there. Basically, I've grouped the posts by date server-side and I want to sort the groups by decending date in Angular. I'm assuming a custom filter is the way to go but I haven't been able to get it to work.

Here's some of the code:

JSON Response:

{"September 20th":[{"id":5,"title":"Test 1","url":"www.google.com","tagline":"Test tagline 1","created_at":"2014-09-20T19:30:44.672Z","updated_at":"2014-09-20T19:30:44.672Z","vote_count":5}],"September 21st":[{"id":6,"title":"Test 2","url":"www.google.com","tagline":"Test tagline 2","created_at":"2014-09-21T00:00:00.000Z","updated_at":"2014-09-20T19:32:41.409Z","vote_count":8}]}

HTML:

<section ng-controller='MainController'>
    <ul ng-repeat="(date, posts) in postList | filter?">
        <h1>{{ date }}</h1>
        <li ng-repeat='post in posts'>
            <p>{{ post.vote_count }}</p>
            <button ng-click='upvote(post)' ng-disabled='!currentUser || hasVoted(post.id)'></button>
            <a href="{{ post.url }}">{{ post.title }}</a>
        </li>
    </ul>  
</section>

This displays the information perfectly, just in the incorrect order of dates.

I appreciate any help you can give me!

corneljr
  • 85
  • 8
  • No need for a filter here, you just need to `reverse` the array you are binding to. – Sergiu Paraschiv Sep 20 '14 at 20:01
  • The response is a JSON object, is it possible to reverse this? – corneljr Sep 20 '14 at 20:22
  • JSON is an acronym for JavaScript Object Notation. It's main _feature_ is that it's valid JavaScript. AngularJS works with _actual_ JS objects, not strings or anything else. So yes, `$http.get` or whatever you are using to get that data knows it needs to transform the response into a JavaScript object. It's an object though, not an array, so you can't simply reverse it. – Sergiu Paraschiv Sep 20 '14 at 20:27
  • Yea exactly, so won't I need a filter? – corneljr Sep 20 '14 at 20:30
  • Can't you do this the _easy_ way and fix the response the server sends? – Sergiu Paraschiv Sep 20 '14 at 20:32
  • I've tried but was unsuccessful, grouping it like this server side seemed like the easiest solution if I could only order it. How would you suggest changing the response? – corneljr Sep 20 '14 at 20:40
  • You can't order properties of an object (not in any common languages anyway), so either switch to a list or, yes, do it client-side. Though the discussions about reversing object keys in JS seem to revolve around the same issue: http://stackoverflow.com/questions/18977881/can-i-loop-through-a-javascript-object-in-reverse-order – Sergiu Paraschiv Sep 20 '14 at 20:44

1 Answers1

0

It's a bit hacky, but it works:

Example

Html:

<section ng-controller='MainController'>
<ul ng-repeat="posts in postList | orderObjectBy:'created_at':true">
    <h1>{{ posts.__originalKey }}</h1>
    <li ng-repeat='post in posts'>
        <p>{{ post.vote_count }}</p>
        <button ng-click='upvote(post)' ng-disabled='!currentUser || hasVoted(post.id)'></button>
        <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
</ul>  
</section>

CustomFilter:

.filter('orderObjectBy', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item, key) {
      item.__originalKey=key;
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      return (a[field] > b[field] ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
})
Josep
  • 12,926
  • 2
  • 42
  • 45
  • @user3826547 sorry there was a type I just fixed it – Josep Sep 20 '14 at 20:21
  • I don't think orderBy works for objects, only arrays. – corneljr Sep 20 '14 at 20:23
  • @user3826547 please have a look at my latest updated, hopefully that will work for you. Cheers! – Josep Sep 20 '14 at 20:53
  • Unreal man, thanks so much! The only issue is that I also get a $promise object stored in the array that's also rendering in the view. Do you have any idea why that would be? – corneljr Sep 20 '14 at 21:09
  • @user3826547 that's weird! with the amount of code that you've shared it's impossible to know. Open another question explaining this issue and make sure to share the code of the service that you are using in order to fetch the "postList", I will try to help. – Josep Sep 20 '14 at 21:36