sorting by different attributes using javascript

Question

I have the following json from a webservice

    var homes = [
    {
        "h_id": "3",
        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "price": "162500",
        "createdOn": "2015-08-31 00:35:14"
    }, {
        "h_id": "4",
        "city": "Bevery Hills",
        "state": "CA",
        "zip": "90210",
        "price": "319250",
        "createdOn": "2015-08-31 14:35:14"
    }, {
        "h_id": "5",
        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "price": "962500",
        "createdOn": "2015-08-31 13:35:14"
    }
];

Using ng-repeat i am showing this in a div (h_id).I know how to sort by using orderBy. but here i have a html select dropdpwn list.OnClick on that i want to sort by New to Old, Old to new, price and h_id.

How do i create a javascript function to get this type of functionality?

you want if select price its need to sort by price or sort by h_id? — Deenadhayalan Manoharan
– Deenadhayalan Manoharan, Commented Sep 7, 2015 at 3:47
yes..if we select price, then sort by price or if we select h_id sort by h_id and two more options are there, newtoOld and oldtoNew . we have to sort by that also — varunaer
– varunaer, Commented Sep 7, 2015 at 3:49
You can refer following urls jitendrazaa.com/blog/webtech/web/… stackoverflow.com/questions/26879066/… — Mohan Singh
– Mohan Singh, Commented Sep 7, 2015 at 4:19
price and h_id sorting is working but for new-to-old and old-to-new, any idea? — varunaer
– varunaer, Commented Sep 7, 2015 at 4:41

Deenadhayalan Manoharan · Accepted Answer · 2015-09-07 05:42:49Z

Try this...

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<html>
 <head>
  <script type="text/javascript">
var homes = [
    {
        "h_id": "3",
        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "price": "162500",
        "createdOn": "2015-08-31 00:35:14"
    }, {
        "h_id": "1",
        "city": "Bevery Hills",
        "state": "CA",
        "zip": "90210",
        "price": "319250",
        "createdOn": "2015-08-31 14:35:14"
    }, {
        "h_id": "5",
        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "price": "1",
        "createdOn": "2015-08-31 13:35:14"
    }
];
   function changeFunc() {

    var selectBox = document.getElementById("selectBox");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value.trim();
alert(selectedValue);

var sort_by = function(field, reverse, primer){
   var key = function (x) {return primer ? primer(x[field]) : x[field]};

   return function (a,b) {
      var A = key(a), B = key(b);
      return ( (A < B) ? -1 : ((A > B) ? 1 : 0) ) * [-1,1][+!!reverse];                  
   }
}

// Sort by price high to low
homes.sort(sort_by(selectedValue, true));
var u1 = document.getElementById('u1');
$(".remove").remove();
for (var i=0; i<homes.length; i++) {
    u1.innerHTML += '<li class="remove">- '+homes[i].price+', '+homes[i].city+'</li>';
}

   }

  </script>
 </head>
 <body>
 To sort or not to sort, that is the question.
<h3>By price asc</h3>
<ul id="u1" style="margin-bottom: 20px;"></ul>

  <select id="selectBox" onchange="changeFunc();">
  <option>Select option</option>
<option value="h_id">h_id</option>
<option value="price">price</option>
<option value="city">city</option>
  </select>
 </body>
</html>

Demo:http://js.do/code/66972

Simba · Accepted Answer · 2015-09-07 03:48:45Z

0

You can use the array.sort function and give it a compare function as a parameter.

ex.

homes.sort(function(l, r) {
   return l.h_id - r.h_id;
});

some documentation: http://www.w3schools.com/jsref/jsref_sort.asp

You could have a different compare function for every case, and sort according to user selection

answered Sep 7, 2015 at 3:48

Simba

1,6511 gold badge11 silver badges16 bronze badges

1 Comment

Simba Over a year ago

ah sorry didn't realize you were using angular: see the documentation here: docs.angularjs.org/api/ng/filter/orderBy orderBy takes a predicate function as the 2nd parameter, put your logical compare function there, change this logical compare function programatically when the user changes the order.

intekhab · Accepted Answer · 2015-09-07 06:23:17Z

Choose your best sorting algo and then implement it by your own

var homes = [
    {
        "h_id": "3",
        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "price": "162500",
        "createdOn": "2015-08-31 00:35:14"
    }, {
        "h_id": "4",
        "city": "Bevery Hills",
        "state": "CA",
        "zip": "90210",
        "price": "319250",
        "createdOn": "2015-08-31 14:35:14"
    }, {
        "h_id": "5",
        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "price": "962500",
        "createdOn": "2015-08-31 13:35:14"
    }
];

var sortBy = 'price'; //define sortBy field on basis of field selected by use to be sort before calling sorting
var orderBy = 'asc';// define sorting based on user selected field to sort either asc or dsc

for (i=0; i<homes.length; i++) {
  for(j=0; j<homes.length-i-1; j++) {
    if (orderBy == 'asc') {
        if ( homes[j][sortBy] > homes[j+1][sortBy]) {
          temp = homes[j];
          homes[j] = homes[j+1];
          homes[j+1] = temp;
        } 
    } else {
        if( homes[j][sortBy] < homes[j+1][sortBy]) {
          temp = homes[j];
          homes[j] = homes[j+1];
          homes[j+1] = temp;
        } 
    }
  }
}
console.log(homes);

But remember '100' < '9' will return true because of string checking

Collectives™ on Stack Overflow

sorting by different attributes using javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related