Andrew Nguyen Andrew Nguyen - 2 months ago 12
Javascript Question

Sorting items from highest to lowest

Objective



I have a click function that will display scores in English, Math, Science and Social Studies on click. I'm looking to order from highest to lowest the
.school
with the top percentage in that subject.


  • I'm wondering what might be the best way to achieve this using either
    .sort()
    or
    isotope.js



scripts.js



$(".btn").click(function(){
$(".btn").removeClass("is-selected");
$(this).addClass("is-selected");

// Button behavior
if ($(this).hasClass("btn-english")) {
$(".school__percentage").each(function(i, element) {
$(element).html(schools[i].percentEnglish);
});
} else if ($(this).hasClass("btn-math")) {
$(".school__percentage").each(function(i, element) {
$(element).html(schools[i].percentMath);
});
} else if ($(this).hasClass("btn-science")) {
$(".school__percentage").each(function(i, element) {
$(element).html(schools[i].percentScience);
});
} else if ($(this).hasClass("btn-social")) {
$(".school__percentage").each(function(i, element) {
$(element).html(schools[i].percentSocial);
});
}
});


schools.js (There are 20 schools)



var schools = [
{
"name": "Maplewood Richmond Heights",
"district": "Maplewood Richmond Heights",
"crest": "src/img/crest-affton.jpg",
"location": "",
"percentEnglish": "1%",
"percentMath": "21%",
"percentScience": "41%",
"percentSocial": "61%"
}


index.html

<div class="widget high-school">
<div class="widget__info">
<p class="widget__category">High school</p>
<p class="widget__title">Missouri Assessment Program standouts</p>
</div>

<div class="widget__buttons">
<p class="widget__rank">Rank by:</p>
<button class="btn btn-english is-selected">English</button>
<button class="btn btn-math">Math</button>
<button class="btn btn-science">Science</button>
<button class="btn btn-social">Social Studies</button>
</div>

<div class="wrapper">
<div class="schools">
<div class="school" data-id="1">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="2">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="3">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="4">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="5">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="6">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="7">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="8">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="9">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="10">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="11">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="12">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="13">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="14">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="15">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="16">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="17">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="18">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="19">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->

<div class="school" data-id="20">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
</div><!-- schools -->
</div>

Answer

This should do the trick for you. Let me know if you have any questions!

var schools = [{
  "name": "School 1",
  "district": "Maplewood Richmond Heights",
  "crest": "src/img/crest-affton.jpg",
  "location": "",
  "percentEnglish": "1%",
  "percentMath": "21%",
  "percentScience": "41%",
  "percentSocial": "61%"
}, {
  "name": "School 2",
  "district": "Maplewood Richmond Heights",
  "crest": "src/img/crest-affton.jpg",
  "location": "",
  "percentEnglish": "61%",
  "percentMath": "11%",
  "percentScience": "31%",
  "percentSocial": "81%"
}, {
  "name": "School 3",
  "district": "Maplewood Richmond Heights",
  "crest": "src/img/crest-affton.jpg",
  "location": "",
  "percentEnglish": "13%",
  "percentMath": "28%",
  "percentScience": "49%",
  "percentSocial": "55%"
}, ];

function sortBySubject(schools, subject, descending) {
  descending = descending || false;
  if (!schools || !subject) {
    var orderedSchools = [];
    return orderedSchools;
  }
  var orderedSchools = schools.slice().sort(function(elem1, elem2) {
    var value1 = Number(elem1["percent" + subject].replace(/[^\d.]/g, "")),
      value2 = Number(elem2["percent" + subject].replace(/[^\d.]/g, ""));
    if (descending) {
      // descending
      return value1 === value2 ? 0 : +(value1 < value2) || -1;
    }
    // ascending
    return value1 === value2 ? 0 : +(value1 > value2) || -1;
  });
  return orderedSchools;
}

console.log(sortBySubject(schools, "English", true));

EDIT - Added DOM Functionality

$(function() {
  var schools = [{
    "name": "School 1",
    "district": "Maplewood Richmond Heights",
    "crest": "src/img/crest-affton.jpg",
    "location": "",
    "percentEnglish": "1%",
    "percentMath": "21%",
    "percentScience": "41%",
    "percentSocial": "61%"
  }, {
    "name": "School 2",
    "district": "Maplewood Richmond Heights",
    "crest": "src/img/crest-affton.jpg",
    "location": "",
    "percentEnglish": "61%",
    "percentMath": "11%",
    "percentScience": "31%",
    "percentSocial": "81%"
  }, {
    "name": "School 3",
    "district": "Maplewood Richmond Heights",
    "crest": "src/img/crest-affton.jpg",
    "location": "",
    "percentEnglish": "13%",
    "percentMath": "28%",
    "percentScience": "49%",
    "percentSocial": "55%"
  }, ];

  function sortBySubject(schools, subject, descending) {
    descending = descending || false;
    if (!schools || !subject) {
      var orderedSchools = [];
      return orderedSchools;
    }
    var orderedSchools = schools.slice().sort(function(elem1, elem2) {
      var value1 = Number(elem1["percent" + subject].replace(/[^\d.]/g, "")),
        value2 = Number(elem2["percent" + subject].replace(/[^\d.]/g, ""));
      if (descending) {
        // descending
        return value1 === value2 ? 0 : +(value1 < value2) || -1;
      }
      // ascending
      return value1 === value2 ? 0 : +(value1 > value2) || -1;
    });
    return orderedSchools;
  }

  $(".widget__buttons button").on("click", function() {
    var subject = $(this).text();
    var orderedSchools = [];
    switch (subject) {
      case "Social Studies":
        {
          subject = "Social";
          break;
        }
    }
    orderedSchools = sortBySubject(schools, subject, true);
    $(".schools").empty();
    orderedSchools.forEach(function(elem, index) {
      var $school = $(".school.clone").clone(true);
      $school.removeClass("clone");
      $school.attr("data-id", (index + 1));
      $school.find(".school__image").attr("src", elem.crest);
      $school.find(".school__name").text(elem.name);
      $school.find(".school__district").text(elem.district);
      $school.find(".school__percentage").text(elem["percent" + subject]);
      $(".schools").append($school);
    });
  });
});
.clone {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="school clone" data-id="1">
  <img src="" class="school__image">
  <div class="school__details">
    <div class="school__name">tk-name</div>
    <div class="school__district">tk-district</div>
  </div>
  <div class="school__percentage">-%</div>
</div>
<!-- school -->
<div class="widget__buttons">
  <p class="widget__rank">Rank by:</p>
  <button class="btn btn-english is-selected">English</button>
  <button class="btn btn-math">Math</button>
  <button class="btn btn-science">Science</button>
  <button class="btn btn-social">Social Studies</button>
</div>
<div class="wrapper">
  <div class="schools">

  </div>
  <!-- schools -->
</div>

Comments