How can I use sort expression to dynamically sort on object attribute?

Question

I have an array of objects and I'd like to dynamically sort the list based on a parameter. Here is an example that show's what works and what doensn't work when I try to use parameter.

const field = 'email'
const users = [{Array of users}]
users = users.sort((a, b) => (a.email > b.email? 1 : -1)); << WORKS
users = users.sort((a, b) => (a.['email'] > b['email']? 1 : -1));  << WORKS

users = users.sort((a, b) => (a.[`'${field}'`] > b[`'${field}'`]? 1 : -1));  << DOESN'T WORK

How can I dynamically sort the list based on a defined parameter?

Side note; assuming that an email variable is a string, you should be using a.email.localeCompare(b.email) — Taplar
– Taplar, Commented Sep 2, 2020 at 17:22

Wex · Accepted Answer · 2020-09-02 17:47:48Z

2

You can actually pass variables directly into the square bracket notation:

users = users.sort((a, b) => a[field] > b[field] ? 1 : -1);

I don't recommend this, but if you did want to use template strings it would look more like this:

a[`${field}`]

If you are sorting by string fields, you'd be better off using localeCompare for your comparison:

users = users.sort((a, b) => { 
  return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
});

I also wanted to point out that for a numeric sort, it's more common to subtract the numbers than to compare them (this is descending order, switch the order to a[field] - b[field] for ascending):

users = users.sort((a, b) => b[field] - a[field]);

A few additional helper functions based on the discussion in the comments:

function stringSort(a, b) {
  return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
}

function numberSort(a, b) {
  return b[field] - a[field];
}

users = users.sort(field === 'email' ? stringSort : numberSort);

edited Sep 2, 2020 at 17:47

answered Sep 2, 2020 at 17:21

Wex

15.7k10 gold badges68 silver badges108 bronze badges

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

6 Comments

mike hennessy Over a year ago

This works, thx! Now, the last step is i want to lowercase the string so it sorts on lowercase values. I tried this users = users.sort((a, b) => a[field].toLowerCase() > b[field].toLowerCase() ? 1 : -1); but it doesn't like it. How to?

Wex Over a year ago

Added another example using localeCompare, which is the preferred method for sorting strings.

mike hennessy Over a year ago

I get error of a[field].toLowerCase is not a function . FYI, i am setting field this way when using real exampe. const field = payload.sortfield where payload is object and sortfield is just a string of say "email". Not sure if that makes a difference on why this isn't working.

Wex Over a year ago

Yes, localeCompare will only work if your fields are strings. You may need to add some logic to use the a[field] > b[field] ? 1 : -1 numeric fields, and use localeCompare for string fields.

Wex Over a year ago

I added a basic example of how you can accomplish this. Note that field has to be defined in the same scope as your field variable, otherwise field inside the sort function will be undefined.

|

Mechanic · Accepted Answer · 2020-09-02 17:23:04Z

0

this ' is extra in last statement,

users = users.sort((a, b) => (a.[`${field}`] > b[`${field}`]? 1 : -1));

btw the result of above is the same this one (for demonstration purpose only

users = users.sort((a, b) => a[field.toString()] > b[field.toString()] ? 1 : -1);

so the best way is the one that @wex has already suggested which is to directly put the variable in brackets:

users = users.sort((a, b) => a[field] > b[field] ? 1 : -1);

answered Sep 2, 2020 at 17:23

Mechanic

5,4684 gold badges19 silver badges44 bronze badges

Collectives™ on Stack Overflow

How can I use sort expression to dynamically sort on object attribute?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related