CODEWITHSUNDEEP
javascriptangularjssortinghybrid
varunaer
varunaer

Reputation: 73

sorting by different attributes using javascript

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?

Upvotes: 2

Views: 89

Answers (3)

intekhab
intekhab

Reputation: 1596

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

Upvotes: 0

Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

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

Upvotes: 1

Simba
Simba

Reputation: 1651

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

Upvotes: 0

Related Questions