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    lt div ng-app gt       lt script type  text javascript  src  http   code angularjs org 1 0 1 angular-1 0 1 js  gt  lt  script gt       lt div ng controller  Main  gt           lt div ng-repeat  release in releases  orderBy  environment id   gt                      release environment id            lt  div gt       lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

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   gt  b field    1   -1               if reverse  filtered reverse        return filtered             lt ul gt   lt li ng-repeat  item in items   orderObjectBy  color  true  gt    item color    lt  li gt   lt  ul gt

User · Answer

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  39 t work

User · Answer

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   lt div class  timeline-image  ng-repeat  image in controller images   orderBy  -favs   gt       lt img ng-src     images name      gt   lt  div gt

User · Answer

Here s a version of  Julian Mosquera s code that also supports a  quot fallback quot  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  gt  bf   1   -1               if reverse  filtered reverse        return filtered

User · Answer

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  gt  b   1   -1               else                 return  a field   gt  b field    1   -1                          Reverse array         if  reverse              filtered reverse            return filtered

User · Answer

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      lt div ng-app  myApp  gt   lt script type  text javascript  src  https   ajax googleapis com ajax libs angularjs 1 0 8 angular min js  gt  lt  script gt   lt div ng-controller  Main  gt     lt div ng-repeat  release in releases   object2Array   orderBy  environment id   gt   release environment id   lt  div gt   lt  div gt    lt script gt   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             lt  script gt

User · Answer

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

[javascript] Angular - Can't make ng-repeat orderBy work

Examples related to javascript

Examples related to json

Examples related to angularjs

Examples related to angularjs-ng-repeat