Sort Array by attribute

Question

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?

score 135 · Accepted Answer · answered Mar 04 '15 at 11:55

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(...

answered Mar 04 '15 at 11:55

Jonny Buchanan

61,926
17
143
150

12

Thanks, that ES6 solution looks so delicious ! – Mini John Mar 04 '15 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 '18 at 20:52

score 19 · Answer 2 · answered Mar 04 '15 at 11:54

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) {

answered Mar 04 '15 at 11:54

Jordi Castilla

26,609
8
70
109

score 6 · Answer 3 · answered Jul 03 '18 at 18:35

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.

answered Jul 03 '18 at 18:35

pscl

3,322
25
29

6

This is bad advice to continue using libraries built for a time when JavaScript wasn't as good. – Patrick Michalina Aug 19 '18 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 '20 at 18:28

score 0 · Answer 4 · answered Jan 20 '23 at 19:03

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);

Sort Array by attribute

4 Answers4

Linked