Angular - Can't make ng-repeat orderBy work

Angular - Can't make ng-repeat orderBy work

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

            
          
                    {{release.environment_id}}          
      
  
  

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.

Please, help!

Thanks!

Answer by tymeJV for Angular - Can't make ng-repeat orderBy work

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

Answer by CJ Cenizal for Angular - Can't make ng-repeat orderBy work

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.

Answer by Eike Thies for Angular - Can't make ng-repeat orderBy work

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 :)

    
    
{{release.environment_id}}
  
      

Answer by nderoche for Angular - Can't make ng-repeat orderBy work

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

Answer by Julian Mosquera for Angular - Can't make ng-repeat orderBy work

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;    };  });    
  
{{ item.color }}
  
  

Answer by Jitters for Angular - Can't make ng-repeat orderBy work

To add to Julian's answer above, orderObjectBy is a standalone angular module: https://github.com/fmquaglia/ngOrderObjectBy

Answer by Tom Sderlund for Angular - Can't make ng-repeat orderBy work

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

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72