sort array based on conditions using javascript sort function

Question

I want to sort an javascript array based on numbers but I wanted a specific group (e.g. Recommended) comes first and ascending, followed by other group that has no types.

Below are the divs, I wanted to sort in such a way that the Recommended comes first and in ascending order followed by other divs in ascending order.

Below code is sorting the divs with no data-type in ascending order correctly but the Recommended is not sorting in ascending order as expected.

var sortedDivs = $(".terminalpopular").toArray().sort(sorter);
console.log(sortedDivs); 

function sorter(a, b) {
    if(a.getAttribute('data-type') == 'Recommended'){
        if (parseFloat(a.getAttribute('data-amount')) < parseFloat(b.getAttribute('data-amount'))){
          return -1;
        }
        return 0;
    }
    else{
      if (parseFloat(a.getAttribute('data-amount')) > parseFloat(b.getAttribute('data-amount'))){
        return 1;
      }
      return 0;
    }
  }

Above code sorts the divs in such form as;

<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular">
    <div class="terminalpopular" data-amount="65.95" data-type="Recommended">
    </div>
    <div class="terminalpopular" data-amount="94.95" data-type="Recommended">  </div>
    <div class="terminalpopular" data-amount="70" data-type="Recommended">
    </div>
    <div class="terminalpopular" data-amount="54.95" data-type="">
    </div>
    <div class="terminalpopular" data-amount="67.99" data-type="">
    </div>
    <div class="terminalpopular" data-amount="75" data-type="">
    </div>
    <div class="terminalpopular" data-amount="78" data-type="">
    </div>
    <div class="terminalpopular" data-amount="84.99" data-type="">
    </div>
    <div class="terminalpopular" data-amount="84.99" data-type="">
    </div>
    </div>

As, it can be seen that divs without any data-type is sorted correctly but Recommended divs are not sorted in ascending order as expected.

Note: It does come in IF clause and condition does meet i.e. (if(a.getAttribute('data-type') == 'Recommended'){}). I have put console in IF and it does compare values.

Please, help. Thanks

Answer 1

thanks to type coercion in JS you can use a Boolean (like in a comparison) as a Number. And the same with the Strings. Since - is a numeric operation, the strings will be casted to Numbers, too.

So you can treat this like a simple numeric sort on two "properties".

function sorter(a, b) {
    return (b.dataset.type === 'Recommended') - (a.dataset.type === 'Recommended') 
        || a.dataset.amount - b.dataset.amount;
}

var sortedDivs = $(".terminalpopular").toArray().sort(sorter);

console.log(sortedDivs)

.as-console-wrapper{top:0;max-height:100%!important}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular">
  <div class="terminalpopular" data-amount="65.95" data-type="Recommended">
  </div>
  </div>
  <div class="terminalpopular" data-amount="54.95">
  </div>
  <div class="terminalpopular" data-amount="70" data-type="Recommended">
  <div class="terminalpopular" data-amount="84.99">
  </div>
  <div class="terminalpopular" data-amount="94.95" data-type="Recommended"> </div>
  <div class="terminalpopular" data-amount="75">
  </div>
  <div class="terminalpopular" data-amount="67.99">
  </div>
  <div class="terminalpopular" data-amount="78">
  </div>
  <div class="terminalpopular" data-amount="84.99">
  </div>
</div>