Sorting JSON by values

Question

I have a very simple JSON object like the following         people                      f name   john             l name   doe             sequence   0             title   president             url   google com             color   333333                             f name   michael             l name   goodyear             sequence   0             title   general manager             url   google com             color   333333                   Now that this is returned from my server side code  I run jQuery each to form the necessary html and output the result    Right now what I am doing is sending an AJAX call to the server containing my sort info    e g   Title DESC  and re-run an SQL query to return the new result set  But I want to avoid this and use jQuery to sort the resulting JSON to prevent round trips to the server  and multiple database access   How can I achieve this using jQuery

User · Accepted Answer

jQuery isn t particularly helpful for sorting  but here s an elegant and efficient solution  Just write a plain JS function that takes the property name and the order  ascending or descending  and calls the native sort   method with a simple comparison function   var people                    f name    john            l name    doe            sequence    0            title     president            url     google com            color     333333                etc     function sortResults prop  asc        people sort function a  b            if  asc                return  a prop   gt  b prop     1     a prop   lt  b prop     -1   0             else               return  b prop   gt  a prop     1     b prop   lt  a prop     -1   0                         renderResults        Then   sortResults  l name   true     Play with a working example here

User · Answer

jQuery fn sort   function           return this pushStack     sort apply  this  arguments                  function sortLastName a b          if  a l name    b l name          return 0              return a l name gt  b l name   1   -1            function sortLastNameDesc a b          return sortLastName a b    -1        var people       f name    john    l name    doe    sequence    0    title     president    url     google com    color     333333         f name    michael    l name    goodyear    sequence    0    title     general manager    url     google com    color     333333       sorted   people  sort sortLastNameDesc

User · Answer

Solution working with different types and with upper and lower cases For example  without the toLowerCase statement   Goodyear  will come before  doe  with an ascending sort  Run the code snippet at the bottom of my answer to view the different behaviors   JSON DATA   var people            f name     john        l name     doe      lower case      sequence   0    int           f name     michael        l name     Goodyear      upper case      sequence    1    int       JSON Sort Function   function sortJson element  prop  propType  asc      switch  propType        case  int         element   element sort function  a  b            if  asc              return  parseInt a prop    gt  parseInt b prop      1     parseInt a prop    lt  parseInt b prop      -1   0             else             return  parseInt b prop    gt  parseInt a prop      1     parseInt b prop    lt  parseInt a prop      -1   0                             break      default        element   element sort function  a  b            if  asc              return  a prop  toLowerCase    gt  b prop  toLowerCase      1     a prop  toLowerCase    lt  b prop  toLowerCase      -1   0             else             return  b prop  toLowerCase    gt  a prop  toLowerCase      1     b prop  toLowerCase    lt  a prop  toLowerCase      -1   0                               Usage   sortJson people    l name    string   true   sortJson people    sequence    int   true      x000D   x000D  var people      x000D     f name    john   x000D     l name    doe   x000D     sequence   0 x000D       x000D     f name    michael   x000D     l name    Goodyear   x000D     sequence   1 x000D       x000D     f name    bill   x000D     l name    Johnson   x000D     sequence   4 x000D       x000D     f name    will   x000D     l name    malone   x000D     sequence   2 x000D       x000D     f name    tim   x000D     l name    Allen   x000D     sequence   3 x000D      x000D   x000D  function sortJsonLcase element  prop  asc    x000D    element   element sort function a  b    x000D      if  asc    x000D        return  a prop   gt  b prop     1     a prop   lt  b prop     -1   0   x000D        else   x000D        return  b prop   gt  a prop     1     b prop   lt  a prop     -1   0   x000D        x000D        x000D    x000D   x000D  function sortJson element  prop  propType  asc    x000D    switch  propType    x000D      case  int   x000D        element   element sort function a  b    x000D          if  asc    x000D            return  parseInt a prop    gt  parseInt b prop      1     parseInt a prop    lt  parseInt b prop      -1   0   x000D            else   x000D            return  parseInt b prop    gt  parseInt a prop      1     parseInt b prop    lt  parseInt a prop      -1   0   x000D            x000D            x000D        break  x000D      default  x000D        element   element sort function a  b    x000D          if  asc    x000D            return  a prop  toLowerCase    gt  b prop  toLowerCase      1     a prop  toLowerCase    lt  b prop  toLowerCase      -1   0   x000D            else   x000D            return  b prop  toLowerCase    gt  a prop  toLowerCase      1     b prop  toLowerCase    lt  a prop  toLowerCase      -1   0   x000D            x000D            x000D      x000D    x000D   x000D  function sortJsonString     x000D    sortJson people   l name    string       chkAscString   prop  checked     x000D    display    x000D    x000D   x000D  function sortJsonInt     x000D    sortJson people   sequence    int       chkAscInt   prop  checked     x000D    display    x000D    x000D   x000D  function sortJsonUL     x000D    sortJsonLcase people   l name       chkAsc   prop  checked     x000D    display    x000D    x000D   x000D  function display     x000D        data   empty    x000D      people  each function     x000D          data   append   lt div class  people  gt     this l name     lt  div gt  lt div class  people  gt     this f name     lt  div gt  lt div class  people  gt     this sequence     lt  div gt  lt br   gt     x000D        x000D    x000D  body   x000D    font-family  Arial  x000D    x000D   people   x000D    display  inline-block  x000D    width  100px  x000D    border  1px dotted black  x000D    padding  5px  x000D    margin  5px  x000D    x000D   buttons   x000D    border  1px solid black  x000D    padding  5px  x000D    margin  5px  x000D    float  left  x000D    width  20   x000D    x000D  ul   x000D    margin  5px 0px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  buttons  style  background-color  rgba 240  255  189  1    gt  x000D    Sort the JSON array  lt strong style  color  red   gt with lt  strong gt  toLowerCase  x000D     lt ul gt  x000D       lt li gt Type  string lt  li gt  x000D       lt li gt Property  lastname lt  li gt  x000D     lt  ul gt  x000D     lt button onclick  sortJsonString    return false   gt Sort JSON lt  button gt  x000D    Asc Sort x000D     lt input id  chkAscString  type  checkbox  checked  checked    gt  x000D   lt  div gt  x000D   lt div class  buttons  style  background-color  rgba 255  214  215  1    gt  x000D    Sort the JSON array  lt strong style  color  red   gt without lt  strong gt  toLowerCase  x000D     lt ul gt  x000D       lt li gt Type  string lt  li gt  x000D       lt li gt Property  lastname lt  li gt  x000D     lt  ul gt  x000D     lt button onclick  sortJsonUL    return false   gt Sort JSON lt  button gt  x000D    Asc Sort x000D     lt input id  chkAsc  type  checkbox  checked  checked    gt  x000D   lt  div gt  x000D   lt div class  buttons  style  background-color  rgba 240  255  189  1    gt  x000D    Sort the JSON array  x000D     lt ul gt  x000D       lt li gt Type  int lt  li gt  x000D       lt li gt Property  sequence lt  li gt  x000D     lt  ul gt  x000D     lt button onclick  sortJsonInt    return false   gt Sort JSON lt  button gt  x000D    Asc Sort x000D     lt input id  chkAscInt  type  checkbox  checked  checked    gt  x000D   lt  div gt  x000D   lt br   gt  x000D   lt br   gt  x000D   lt div id  data  style  float  left  border  1px solid black  width  60   margin  5px   gt Data lt  div gt  x000D   x000D   x000D

User · Answer

If you don t mind using an external library  Lodash has lots of wonderful utilities  var people               f name   john         l name   doe         sequence   0         title   president         url   google com         color   333333                 f name   michael         l name   goodyear         sequence   0         title   general manager         url   google com         color   333333           var sorted     sortBy people   l name     You can also sort by multiple properties  Here s a plunk showing it in action

User · Answer

Here s a multiple-level sort method  I m including a snippet from an Angular JS module  but you can accomplish the same thing by scoping the sort keys objects such that your sort function has access to them  You can see the full module at Plunker    scope sortMyData   function  a  b      var retVal   0  key    for  var i   0  i  lt   scope sortKeys length  i            if  retVal     0              break            else             key    scope sortKeys i         if   asc      key direction                  retVal    a key field   lt  b key field     -1    a key field   gt  b key field     1   0                else                 retVal    a key field   lt  b key field     1    a key field   gt  b key field     -1   0                      return retVal

User · Answer

Demo  https   jsfiddle net kvxazhso  Successfully pass equal values  keep same order   Flexible   handle ascendant  123  or descendant  321   works for numbers  letters  and unicodes  Works on all tested devices  Chrome  Android default browser  FF   Given data such   var people         myKey    A    status   0       myKey    B    status   3       myKey    C    status   3       myKey    D    status   2       myKey    E    status   7            Sorting by ascending or reverse order  function sortJSON arr  key  way        return arr sort function a  b            var x   a key   var y   b key           if  way      123     return   x  lt  y    -1     x  gt  y    1   0              if  way      321     return   x  gt  y    -1     x  lt  y    1   0                 people2   sortJSON people  status    321       123 or 321 alert  quot 2  After processing  0 to x if 123  x to 0 if 321    quot  JSON stringify people2

[jquery] Sorting JSON by values

Examples related to jquery

Examples related to json