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?

Jonny Buchanan · Accepted Answer · 2015-03-04 11:55:37Z

137

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 4, 2015 at 11:55

Jonny Buchanan

62.9k17 gold badges147 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mini John Over a year ago

Thanks, that ES6 solution looks so delicious !

lynn Over a year ago

Note: this sorts the array in place (and also returns the array). Which means that after champions.sort(…), champions will be modified (sorted).

Jordi Castilla · Accepted Answer · 2015-03-04 11:54:23Z

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 4, 2015 at 11:54

Jordi Castilla

27.1k8 gold badges73 silver badges113 bronze badges

Comments

pscl · Accepted Answer · 2018-07-03 18:35:16Z

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 3, 2018 at 18:35

pscl

3,42230 silver badges29 bronze badges

2 Comments

Patrick Michalina Over a year ago

This is bad advice to continue using libraries built for a time when JavaScript wasn't as good.

l p Over a year ago

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

Yilmaz · Accepted Answer · 2023-01-20 19:03:11Z

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

answered Jan 20, 2023 at 19:03

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Collectives™ on Stack Overflow

Sort Array by attribute

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related