AngularJS sorting by property

Question

What I am trying to do is sort some data by property  Here is example that I tought should work but it doesn t   HTML part    lt div ng-app  myApp  gt       lt div ng-controller  controller  gt       lt ul gt           lt li ng-repeat   key  value  in testData   orderBy  value order   gt                value order      key   - gt    value name            lt  li gt       lt  ul gt       lt  div gt   lt  div gt    JS part   var myApp   angular module  myApp         myApp controller  controller      scope   function   scope          scope testData             C   name  CData   order  1           B   name  BData   order  2           A   name  AData   order  3                 And the result         A -  AData   B -  BData   C -  CData          that IMHO should look like this         C -  CData   B -  BData   A -  AData      Did I miss something  here is ready JSFiddle to experiment on

User · Answer

It s pretty easy  just do it like this   scope props     order  1    order  5    order  2     ng-repeat  prop in props   orderBy  order

User · Answer

Armin s answer   a strict check for object types and non-angular keys such as  resolve  app filter  orderObjectBy   function     return function input  attribute        if   angular isObject input   return input       var array           for var objectKey in input          if  typeof input objectKey         object   amp  amp  objectKey charAt 0                   array push input objectKey               array sort function a  b           a   parseInt a attribute            b   parseInt b attribute            return a - b               return array

User · Answer

Here is what i did and it works  I just used a stringified object    scope thread              mostRecent  text  hello world  timeStamp 12345678        allMessages           MoreThreads        etc           lt div ng-repeat  message in thread   orderBy    -mostRecent timeStamp    gt   if i wanted to sort by text i would do    orderBy    mostRecent text

User · Answer

As you can see in the code of angular-JS   https   github com angular angular js blob master src ng filter orderBy js   ng-repeat does not work with objects  Here is a hack with sortFunction    http   jsfiddle net sunnycpp qaK56 33    lt div ng-app  myApp  gt       lt div ng-controller  controller  gt       lt ul gt           lt li ng-repeat  test in testData   orderBy sortMe    gt              Order     test value order   - gt  Key   test key   Name    test value name            lt  li gt       lt  ul gt       lt  div gt   lt  div gt   myApp controller  controller      scope   function   scope         var testData             a  name  CData   order  2           b  name  AData   order  3           c  name  BData   order  1              scope testData     map testData  function vValue  vKey            return   key vKey  value vValue                  scope sortMe   function             return function object                return object value order

User · Answer

I will add my upgraded version of filter which able to supports next syntax        ng-repeat   id  item  in  ctrl modelData   orderObjectBy  itemProperty someOrder   asc      app filter  orderObjectBy   function              function byString o  s                s   s replace      w     g     1       convert indexes to properties             s   s replace                          strip a leading dot             var a   s split                   for  var i   0  n   a length  i  lt  n    i                    var k   a i                   if  k in o                        o   o k                     else                       return                                              return o                     return function input  attribute  direction                if   angular isObject input   return input               var array                   for var objectKey in input                    if  input hasOwnProperty objectKey                         array push input objectKey                                                 array sort function a  b                   a   parseInt byString a  attribute                    b   parseInt byString b  attribute                    return direction     asc    a - b   b - a                              return array                     Thanks to Armin and Jason for their answers in this thread  and Alnitak in this thread

User · Answer

You should really improve your JSON structure to fix your problem    scope testData         name  CData   order  1       name  BData   order  2       name  AData   order  3       Then you could do   lt li ng-repeat  test in testData   orderBy order  gt     lt  li gt    The problem  I think  is that the  key  value  variables are not available to the orderBy filter  and you should not be storing data in your keys anyways

User · Answer

according to http   docs angularjs org api ng filter orderBy   orderBy sorts an array  In your case you re passing an object  so You ll have to implement Your own sorting function   or pass an array -    scope testData         C   name  CData   order  1       B   name  BData   order  2       A   name  AData   order  3       take a look at http   jsfiddle net qaK56

User · Answer

Don t forget that parseInt   only works for Integer values  To sort string values you need to swap this   array sort function a  b     a   parseInt a attribute      b   parseInt b attribute      return a - b        with this   array sort function a  b     var alc   a attribute  toLowerCase          blc   b attribute  toLowerCase      return alc  gt  blc   1   alc  lt  blc   -1   0

User · Answer

The following allows for the ordering of objects by key OR by a key within an object   In template you can do something like        lt li ng-repeat   k i  in objectList   orderObjectsBy   someKey   gt    Or even        lt li ng-repeat   k i  in objectList   orderObjectsBy   someObj someKey   gt    The filter   app filter  orderObjectsBy   function     return function input  attribute        if   angular isObject input   return input          Filter out angular objects      var array           for var objectKey in input          if  typeof input objectKey         object   amp  amp  objectKey charAt 0                   array push input objectKey               var attributeChain   attribute split            array sort function a  b          for  var i 0  i  lt  attributeChain length  i              a    typeof a       object    amp  amp  a hasOwnProperty  attributeChain i     a attributeChain i     0          b    typeof b       object    amp  amp  b hasOwnProperty  attributeChain i     b attributeChain i     0                 return parseInt a  - parseInt b                return array

User · Answer

AngularJS  orderBy filter does just support arrays - no objects  So you have to write an own small filter  which does the sorting for you   Or change the format of data you handle with  if you have influence on that   An array containing objects is sortable by native orderBy filter   Here is my orderObjectBy filter for AngularJS   app filter  orderObjectBy   function     return function input  attribute        if   angular isObject input   return input       var array           for var objectKey in input            array push input objectKey               array sort function a  b           a   parseInt a attribute            b   parseInt b attribute            return a - b              return array           Usage in your view    lt div class  item  ng-repeat  item in items   orderObjectBy  position   gt             lt  div gt    The object needs in this example a position attribute  but you have the flexibility to use any attribute in objects  containing an integer   just by definition in view   Example JSON          123     name    Test B    position    2         456     name    Test A    position    1       Here is a fiddle which shows you the usage  http   jsfiddle net 4tkj8 1

[javascript] AngularJS sorting by property

Examples related to javascript

Examples related to angularjs