Angular - Can't make ng-repeat orderBy work

Question

I've tried many examples of ng-repeat with orderBy, but I can't make my json work with it.

<div ng-app>
    <script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
    <div ng:controller="Main">
        <div ng-repeat="release in releases| orderBy:'environment_id'">      
            {{release.environment_id}}
        </div>
    </div>
</div>

And the JSON

function Main($scope) {
$scope.releases = {
    "tvl-c-wbap001 + tvl-webapp": {
        "timestamp": " 05:05:53 PM ",
        "environment_id": "CERT5",
        "release_header": "Projects/Dev",
        "date": "19 Oct",
        "release": "12.11.91-1"
    },
    "tvl-c-wbap401 + tvl-webapp": {
        "timestamp": " 10:07:25 AM ",
        "environment_id": "CERT4",
        "release_header": "Future Release",
        "date": "15 Oct",
        "release": "485-1"
    },
    "tvl-c-wbap301 + tvl-webapp": {
        "timestamp": " 07:59:48 AM ",
        "environment_id": "CERT3",
        "release_header": "Next Release",
        "date": "15 Oct",
        "release": "485-1"
    },
    "tvl-c-wbap201 + tvl-webapp": {
        "timestamp": " 03:34:07 AM ",
        "environment_id": "CERT2",
        "release_header": "Next Changes",
        "date": "15 Oct",
        "release": "13.12.3-1"
    },
    "tvl-c-wbap101 + tvl-webapp": {
        "timestamp": " 12:44:23 AM ",
        "environment_id": "CERT1",
        "release_header": "Production Mirror",
        "date": "15 Oct",
        "release": "13.11.309-1"
    },
    "tvl-s-wbap002 + tvl-webapp": {
        "timestamp": " 12:43:23 AM ",
        "environment_id": "Stage2",
        "date": "15 Oct",
        "release": "13.11.310-1"
    },
    "tvl-s-wbap001 + tvl-webapp": {
        "timestamp": " 11:07:38 AM ",
        "environment_id": "Stage1",
        "release_header": "Production Mirror",
        "date": "11 Oct",
        "release": "13.11.310-1"
    },
    "tvl-p-wbap001 + tvl-webapp": {
        "timestamp": " 11:39:25 PM ",
        "environment_id": "Production",
        "release_header": "Pilots",
        "date": "14 Oct",
        "release": "13.11.310-1"
    },
    "tvl-p-wbap100 + tvl-webapp": {
        "timestamp": " 03:27:53 AM ",
        "environment_id": "Production",
        "release_header": "Non Pilots",
        "date": "11 Oct",
        "release": "13.11.309-1"
    }
}

It doesn't matter what I write, I always get the same order, or I may say, no order at all.

score 99 · Accepted Answer · edited May 23 '17 at 10:30

99

The orderBy only works with Arrays -- See http://docs.angularjs.org/api/ng.filter:orderBy

Also a great filter to use for Objects instead of Arrays @ Angularjs OrderBy on ng-repeat doesn't work

edited May 23 '17 at 10:30

Community

1
1

answered Oct 15 '13 at 17:50

tymeJV

103,943
14
161
157

I have an array, but this does not work in Chrome. Do you know why? – yu.pitomets Aug 13 '16 at 01:37

score 90 · Answer 2 · answered Oct 15 '13 at 17:56

As mentioned, only arrays are allowed. But to make it simple for you, you could dynamically convert the object into an array via a piping function as seen here https://gist.github.com/brev/3949705

Just declare the filter, and add it to ng-repeat :)

<div ng-app="myApp">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-controller="Main">
  <div ng-repeat="release in releases | object2Array | orderBy:'environment_id'">{{release.environment_id}}</div>
</div>

<script>

var app = angular.module('myApp', []).filter('object2Array', function() {
    return function(input) {
      var out = []; 
      for(i in input){
        out.push(input[i]);
      }
      return out;
    }
  })
.controller('Main',function ($scope) {
        $scope.releases = {"tvl-c-wbap001 + tvl-webapp":{"timestamp":" 05:05:53 PM ","environment_id":"CERT5","release_header":"Projects/Dev","date":"19 Oct","release":"12.11.91-1"},"tvl-c-wbap401 + tvl-webapp":{"timestamp":" 10:07:25 AM ","environment_id":"CERT4","release_header":"Future Release","date":"15 Oct","release":"485-1"},"tvl-c-wbap301 + tvl-webapp":{"timestamp":" 07:59:48 AM ","environment_id":"CERT3","release_header":"Next Release","date":"15 Oct","release":"485-1"},"tvl-c-wbap201 + tvl-webapp":{"timestamp":" 03:34:07 AM ","environment_id":"CERT2","release_header":"Next Changes","date":"15 Oct","release":"13.12.3-1"},"tvl-c-wbap101 + tvl-webapp":{"timestamp":" 12:44:23 AM ","environment_id":"CERT1","release_header":"Production Mirror","date":"15 Oct","release":"13.11.309-1"},"tvl-s-wbap002 + tvl-webapp":{"timestamp":" 12:43:23 AM ","environment_id":"Stage2","date":"15 Oct","release":"13.11.310-1"},"tvl-s-wbap001 + tvl-webapp":{"timestamp":" 11:07:38 AM ","environment_id":"Stage1","release_header":"Production Mirror","date":"11 Oct","release":"13.11.310-1"},"tvl-p-wbap001 + tvl-webapp":{"timestamp":" 11:39:25 PM ","environment_id":"Production","release_header":"Pilots","date":"14 Oct","release":"13.11.310-1"},"tvl-p-wbap100 + tvl-webapp":{"timestamp":" 03:27:53 AM ","environment_id":"Production","release_header":"Non Pilots","date":"11 Oct","release":"13.11.309-1"}}
    });
</script>

I use simpler `toArray` filter: `function(obj){return Object.keys(obj).map(function(key){return obj[key];});}` — vp_arth, May 25 '15 at 08:35
Im not sure if this happens with filters, but if you create an array on each sort using a function, the $digest triggers more than once. Can anyone tell if this happens using filter too? See https://docs.angularjs.org/error/$rootScope/infdig — James Cazzetta, Aug 18 '15 at 16:34
Could it be that not only arrays are supported for orderBy now? De doc link states: "Array-like values (e.g. NodeLists, jQuery objects, TypedArrays, Strings, etc) are also supported." — fran, Jan 15 '16 at 21:40

score 29 · Answer 3 · answered Nov 21 '14 at 21:11

the built-in orderBy filter will no longer work when iterating an object. It’s ignored due to the way that object fields are stored. You need create a custom filter

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

<ul>
<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>
</ul>

score 11 · Answer 4 · answered Jul 15 '14 at 08:49

11

in Eike Thies's response above, if we use underscore.js, filter could be simplified to :

var app = angular.module('myApp', []).filter('object2Array', function() {
  return function(input) {
    return _.toArray(input);
  }
});

answered Jul 15 '14 at 08:49

nderoche

1,796
3
14
7

Best answer so far! Awesome. – CSS Aug 10 '15 at 18:21

score 3 · Answer 5 · answered Oct 23 '15 at 19:57

Here's a version of @Julian Mosquera's code that also supports sorting by object key:

yourApp.filter('orderObjectBy', function () {
    return function (items, field, reverse) {
        // Build array
        var filtered = [];
        for (var key in items) {
            if (field === 'key')
                filtered.push(key);
            else
                filtered.push(items[key]);
        }
        // Sort array
        filtered.sort(function (a, b) {
            if (field === 'key')
                return (a > b ? 1 : -1);
            else
                return (a[field] > b[field] ? 1 : -1);
        });
        // Reverse array
        if (reverse)
            filtered.reverse();
        return filtered;
    };
});

score 1 · Answer 6 · answered Oct 15 '13 at 17:54

1

You're going to have to reformat your releases object to be an array of objects. Then you'll be able to sort them the way you're attempting.

answered Oct 15 '13 at 17:54

CJ Cenizal

197
6

score 1 · Answer 7 · answered Aug 01 '17 at 14:28

orderby works on arrays that contain objects with immidiate values which can be used as filters, ie

controller.images = [{favs:1,name:"something"},{favs:0,name:"something else"}];

When the above array is repeated, you may use | orderBy:'favs' to refer to that value immidiately, or use a minus in front to order descending

<div class="timeline-image" ng-repeat="image in controller.images | orderBy:'-favs'">
    <img ng-src="{{ images.name }}"/>
</div>

score 0 · Answer 8 · answered Jul 17 '20 at 14:34

Here's a version of @Julian Mosquera's code that also supports a "fallback" field to use in case the primary field happens to be null or undefined:

yourApp.filter('orderObjectBy', function() {
  return function(items, field, fallback, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      var af = a[field];
      if(af === undefined || af === null) { af = a[fallback]; }

      var bf = b[field];
      if(bf === undefined || bf === null) { bf = b[fallback]; }

      return (af > bf ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
});

Angular - Can't make ng-repeat orderBy work

8 Answers8

Linked

Related