Angular - Sort objects in ng-repeat

Question

I have angular objects as below:

var objs = {
    "1" : {name:'abc',createdAt:'2016-06-25'}
    "4" : {name:'abc',createdAt:'2015-07-06'}
    "7" : {name:'abc',createdAt:'2015-03-12'}
    "2" : {name:'abc',createdAt:'2016-01-04'}
    "6" : {name:'abc',createdAt:'2016-06-17'}
}

i want to sort (orderBy) this objs in ng-repeat by property 'createdAt' DESC order.

Please Note down that objs is of type Object not Array. I am iterating over objects.

how to achieve that?

<tr ng-repeat="obj in objs track by $index | orderBy : createdAt : true" >
    <td>{{obj.createdAt}}</td>
</tr>

should i use $index or not?

Here is plnkr

You could use the negative sign (-) in your filter to signify DESC sorting. ng-repeat="obj in objs track by $index | orderBy : '-createdAt' " — Bon Macalindong
– Bon Macalindong, Commented Jul 15, 2016 at 6:38
Try without track by: ng-repeat="obj in objs | orderBy:'-createdAt'" — dfsq
– dfsq, Commented Jul 15, 2016 at 6:42
you create an array from this data...and give it to angular the way angular wants — vijay
– vijay, Commented Jul 15, 2016 at 7:58
Rethink your design! It would be better if you sort your object already in the controller. Otherwise you move logic into the html. — Sebastian Witeczek
– Sebastian Witeczek, Commented Jul 15, 2016 at 9:17

JLRishe · Accepted Answer · 2016-07-15 09:17:50Z

3

The built-in orderBy doesn't work on objects, but someone has created a filter for what you are trying to do:

http://justinklemm.com/angularjs-filter-ordering-objects-ngrepeat/

yourApp.filter('orderObjectBy', 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;
  };
});


<tr ng-repeat="item in items | orderObjectBy : 'createdAt' : true" >

https://plnkr.co/edit/3lbvJCegtHYIougIhK1R?p=preview

answered Jul 15, 2016 at 9:17

JLRishe

102k19 gold badges138 silver badges171 bronze badges

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

Comments

Liviu Stirb · Accepted Answer · 2016-07-15 12:06:24Z

If you add order by you will receive an error:

orderBy:notarray
Value is not array-like

Luckily angular error reference manual will provide following suggestion:

orderBy must be used with an array-like value so a subset of items can be returned. The array can be initialized asynchronously and therefore null or undefined won't throw this error.

To use orderBy to order the properties of an object, you can create your own array based on that object:

  $scope.arrFromMyObj = Object.keys(myObj).map(function(key) {
    return myObj[key];   }); });

Full code:

<html ng-app="SoApp">
  <head>

  </head>
  <body>
  <table ng-controller="appCtrl">
    <tr ng-repeat="value in data| orderBy:'createdAt':true" >
      <td>{{value.createdAt}}</td>
    </tr>
  </table>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script>
    angular.module('SoApp', [])
    .controller('appCtrl', ['$scope',
      function($scope) {
        $scope.objs = {
          "1" : {name:'abc',createdAt:'2016-06-25'},
          "4" : {name:'abc',createdAt:'2015-07-06'},
          "7" : {name:'abc',createdAt:'2015-03-12'},
          "2" : {name:'abc',createdAt:'2016-01-04'},
          "6" : {name:'abc',createdAt:'2016-06-17'}
        };
        $scope.data =  Object.keys($scope.objs).map(function (key) {return $scope.objs[key]});
        console.log($scope.arrFromMyObj )
      }]);
  </script>

  </body>
</html>

Collectives™ on Stack Overflow

Angular - Sort objects in ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related