61

I right now just get the first 3 Object of an Array and map over them:

<ul className="ItemSearchList"> 
  { 
    champions.slice(0,3).map(function(champ){
      return (
        <li key={champ.id} >
          <div className="media">
            <div className="media-left">
              <a href="#">
                <img className="media-object" src={"http://ddragon.leagueoflegends.com/cdn/5.2.1/img/champion/" + champ.key  + ".png"} />
              </a>
            </div>
            <div className="media-body" >
              <h4 className="media-heading">{champ.name}</h4>
              <div>
                something
              </div>
            </div>
          </div>
        </li>
      )
    }) 
  }
</ul>

Each champ has a level attribute (champ.level).

How can I sort my output to champ.level descending and slice the first 3?

4 Answers 4

135

Use Array.prototype.sort() with a custom compare function to do the descending sort first:

champions.sort(function(a, b) { return b.level - a.level }).slice(...

Even nicer with ES6:

champions.sort((a, b) => b.level - a.level).slice(...
2
  • 12
    Thanks, that ES6 solution looks so delicious !
    – Mini John
    Mar 4, 2015 at 12:04
  • 6
    Note: this sorts the array in place (and also returns the array). Which means that after champions.sort(…), champions will be modified (sorted).
    – Lynn
    Nov 20, 2018 at 20:52
19

Write your own comparison function:

function compare(a,b) {
  if (a.level < b.level)
     return -1;
  if (a.level > b.level)
    return 1;
  return 0;
}

To use it:

champions.sort(compare).slice(0,3).map(function(champ) {
6

The pure JS solutions are nice. But if your project is set up via npm, you can also use Lodash or Underscore. In many cases those are already sub-dependencies so no extra weight is incurred.

Combining ES6 and _.orderBy provided by lodash

_.orderBy(champions, [c => c.level], ['desc']).slice(0,3)

This is a powerful little utility. You can provide multiple tie-breaking sort keys to orderBy, and specify an order for each individually.

2
  • 6
    This is bad advice to continue using libraries built for a time when JavaScript wasn't as good. Aug 19, 2018 at 15:15
  • 3
    @PatrickMichalina, it's 2020 and if I'm not mistaken javascript sort is still horrible. It mutates the array and isn't as declarative (i.e. use of clear names like ascending/descending for readability). Half the time I need to sort something it still takes 7 or 8 lines of code to do something that should be 1 line easily.
    – l p
    May 17, 2020 at 18:28
0

if "level" attribute is a number, above answers would work but what if the "level" atribute is a string. . for a general soluiton, first write a function to determine the sorting criteria:

function getSortingCriteria(champ){
   // this will return sorting criteria
   return cham.level
}

then based on sorting criteria

champs
  .sort((a, b) => {
    // valueA and valueB are two simple values
    const valueA = getSortingCriteria(a);
    const valueB = getSortingCriteria(b);

    if (typeof valueA === "string") {
      // this is descending order
      return valueB.localCompare(valueB);
    } else {
      // desc order
      return valueB - valueA;
    }
  })
  .slice(0, 3);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.