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 · 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]) > parseInt(b[prop])) ? 1 : ((parseInt(a[prop]) < parseInt(b[prop])) ? -1 : 0);
        } else {
          return (parseInt(b[prop]) > parseInt(a[prop])) ? 1 : ((parseInt(b[prop]) < parseInt(a[prop])) ? -1 : 0);
        }
      });
      break;
    default:
      element = element.sort(function (a, b) {
        if (asc) {
          return (a[prop].toLowerCase() > b[prop].toLowerCase()) ? 1 : ((a[prop].toLowerCase() < b[prop].toLowerCase()) ? -1 : 0);
        } else {
          return (b[prop].toLowerCase() > a[prop].toLowerCase()) ? 1 : ((b[prop].toLowerCase() < a[prop].toLowerCase()) ? -1 : 0);
        }
      });
  }
}

Usage:

sortJson(people , "l_name", "string", true);
sortJson(people , "sequence", "int", true);

_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] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0);_x000D_
    } else {_x000D_
      return (b[prop] > a[prop]) ? 1 : ((b[prop] < 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]) > parseInt(b[prop])) ? 1 : ((parseInt(a[prop]) < parseInt(b[prop])) ? -1 : 0);_x000D_
        } else {_x000D_
          return (parseInt(b[prop]) > parseInt(a[prop])) ? 1 : ((parseInt(b[prop]) < 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() > b[prop].toLowerCase()) ? 1 : ((a[prop].toLowerCase() < b[prop].toLowerCase()) ? -1 : 0);_x000D_
        } else {_x000D_
          return (b[prop].toLowerCase() > a[prop].toLowerCase()) ? 1 : ((b[prop].toLowerCase() < 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("<div class='people'>" + this.l_name + "</div><div class='people'>" + this.f_name + "</div><div class='people'>" + this.sequence + "</div><br />");_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_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="buttons" style="background-color: rgba(240, 255, 189, 1);">_x000D_
  Sort the JSON array <strong style="color: red;">with</strong> toLowerCase:_x000D_
  <ul>_x000D_
    <li>Type: string</li>_x000D_
    <li>Property: lastname</li>_x000D_
  </ul>_x000D_
  <button onclick="sortJsonString(); return false;">Sort JSON</button>_x000D_
  Asc Sort_x000D_
  <input id="chkAscString" type="checkbox" checked="checked" />_x000D_
</div>_x000D_
<div class="buttons" style="background-color: rgba(255, 214, 215, 1);">_x000D_
  Sort the JSON array <strong style="color: red;">without</strong> toLowerCase:_x000D_
  <ul>_x000D_
    <li>Type: string</li>_x000D_
    <li>Property: lastname</li>_x000D_
  </ul>_x000D_
  <button onclick="sortJsonUL(); return false;">Sort JSON</button>_x000D_
  Asc Sort_x000D_
  <input id="chkAsc" type="checkbox" checked="checked" />_x000D_
</div>_x000D_
<div class="buttons" style="background-color: rgba(240, 255, 189, 1);">_x000D_
  Sort the JSON array:_x000D_
  <ul>_x000D_
    <li>Type: int</li>_x000D_
    <li>Property: sequence</li>_x000D_
  </ul>_x000D_
  <button onclick="sortJsonInt(); return false;">Sort JSON</button>_x000D_
  Asc Sort_x000D_
  <input id="chkAscInt" type="checkbox" checked="checked" />_x000D_
</div>_x000D_
<br />_x000D_
<br />_x000D_
<div id="data" style="float: left; border: 1px solid black; width: 60%; margin: 5px;">Data</div>

_x000D_

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

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

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

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

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

[jquery] Sorting JSON by values

Examples related to jquery

Examples related to json