Sorting a JSON response in Angular by keys

Question

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!

No need for a filter here, you just need to reverse the array you are binding to. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Sep 20, 2014 at 20:01
The response is a JSON object, is it possible to reverse this? — corneljr
– corneljr, Commented Sep 20, 2014 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
– Sergiu Paraschiv, Commented Sep 20, 2014 at 20:27
Can't you do this the easy way and fix the response the server sends? — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Sep 20, 2014 at 20:32

Josep · Accepted Answer · 2014-09-20 20:52:38Z

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;
  };
})

edited Sep 20, 2014 at 20:52

answered Sep 20, 2014 at 20:15

Josep

13.1k2 gold badges44 silver badges45 bronze badges

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

5 Comments

Josep Over a year ago

@user3826547 sorry there was a type I just fixed it

corneljr Over a year ago

I don't think orderBy works for objects, only arrays.

Josep Over a year ago

@user3826547 please have a look at my latest updated, hopefully that will work for you. Cheers!

corneljr Over a year ago

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?

Josep Over a year ago

@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.

Collectives™ on Stack Overflow

Sorting a JSON response in Angular by keys

1 Answer 1

Example

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related