JavaScript array.sort with multiple values (strings and numbers)

Question

I'd like to sort an array by subject (string, alphabetical), then level (int, ascending), then name (string, alphabetical). I have found numerous other threads on SO but I haven't found any which sort by multiple variable types. I thought I had it, but it isn't sorting properly.

The sort function:

scipads.sort(function (a, b) {
    if (a.subject != b.subject)
        return a.subject < b.subject;
    if (a.level != b.level)
        return a.level - b.level;
    return a.name < b.name;
});

The array:

var scipads = [{
        "name": "L2 Physics Externals",
        "level": 2,
        "subject": "physics",
    }, {
        "name": "L2 Physics Internals",
        "level": 2,
        "subject": "physics",
    }, {
        "name": "L2 Chem Externals",
        "level": 2,
        "subject": "chemistry",
    }, {
        "name": "L2 Chem Internals",
        "level": 2,
        "subject": "chemistry",
    }, {
        "name": "L2 Bio Internals",
        "level": 2,
        "subject": "biology",
    }, {
        "name": "L2 Bio Externals",
        "level": 2,
        "subject": "biology",
    }, {
        "name": "L1 Electricity & Magnetism",
        "level": 1,
        "subject": "physics",
    }, {
        "name": "L1 Wave Behaviour",
        "level": 1,
        "subject": "physics",
    }, {
        "name": "L1 Heat",
        "level": 1,
        "subject": "physics",
    }, {
        "name": "L1 Carbon Chemistry",
        "level": 1,
        "subject": "chemistry",
    }, {
        "name": "L1 Selected Elements",
        "level": 1,
        "subject": "chemistry",
    }, {
        "name": "L1 Chemical Reactions",
        "level": 1,
        "subject": "chemistry",
    },
];

How can I sort by subject, then level, then name?

Maybe sort by subject first, then take all items with the same subject into a new list and sort that by level, then do the same with name, in the end piece it back together? — xDreamCoding
– xDreamCoding, Commented Jun 4, 2017 at 5:08
Strings need to be compared with a.subject.localeCompare(b.subject). The sort function needs to return a positive or negative value or zero. Currently for strings it’s only returning true or false which reflects positive and zero. Negative is missing. — Sebastian Simon
– Sebastian Simon, Commented Jun 4, 2017 at 5:08
@DarkMatterMatt It needs to return -1 whenever the first value needs to come before the second one. — Sebastian Simon
– Sebastian Simon, Commented Jun 4, 2017 at 5:10
You could probably simplify everything into scipads.sort((a, b) => a.subject.localeCompare(b.subject) || a.level - b.level || a.name.localeCompare(b.name));. — Sebastian Simon
– Sebastian Simon, Commented Jun 4, 2017 at 5:12

Rajesh Dixit · Accepted Answer · 2017-06-04 05:32:50Z

3

Use localeCompare for comparing strings

var scipads=[{name:"L2 Physics Externals",level:2,subject:"physics"},{name:"L2 Physics Internals",level:2,subject:"physics"},{name:"L2 Chem Externals",level:2,subject:"chemistry"},{name:"L2 Chem Internals",level:2,subject:"chemistry"},{name:"L2 Bio Internals",level:2,subject:"biology"},{name:"L2 Bio Externals",level:2,subject:"biology"},{name:"L1 Electricity & Magnetism",level:1,subject:"physics"},{name:"L1 Wave Behaviour",level:1,subject:"physics"},{name:"L1 Heat",level:1,subject:"physics"},{name:"L1 Carbon Chemistry",level:1,subject:"chemistry"},{name:"L1 Selected Elements",level:1,subject:"chemistry"},{name:"L1 Chemical Reactions",level:1,subject:"chemistry"}];

scipads.sort(function(a, b) {
  if (a.subject != b.subject)
    return a.subject.localeCompare(b.subject);
  else if (a.level != b.level)
    return a.level - b.level;
  return a.name.localeCompare(b.name);
});

console.log(scipads);

edited Jun 4, 2017 at 5:32

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

answered Jun 4, 2017 at 5:11

A. L

12.7k29 gold badges100 silver badges179 bronze badges

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

2 Comments

DarkMatterMatt Over a year ago

accepted your answer because of correct capitalization handling (and sorting the right way)

A. L Over a year ago

Thanks, localeCompare is useful for non-English characters too.

Andy Gaskell · Accepted Answer · 2017-06-04 05:12:15Z

2

Comparison should return an integer. Here's an example:

scipads.sort((a, b) => {
    if (a.subject != b.subject) { 
        return a.subject < b.subject ? -1 : 1; 
    }
    if (a.level != b.level) { 
        return a.level - b.level; 
    }
    return a.name < b.name ? -1 : 1;
})

answered Jun 4, 2017 at 5:12

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

5 Comments

DarkMatterMatt Over a year ago

hey, nice arrow operator. Learn something new every day.

Sash Sinha Over a year ago

@DarkMatterMatt The arrow operator is a feature called "Arrow Functions" introduced in ES6.

DarkMatterMatt Over a year ago

just for correctness, could you please edit the <s for >s. It's sorting Z-A.

Andy Gaskell Over a year ago

@DarkMatterMatt can you double check? It's sorting correctly on my end :)

DarkMatterMatt Over a year ago

haha yep my bad, was thinking it was ? 1 : -1; not the other way round. Sorry :P

pacifier21 · Accepted Answer · 2017-06-04 05:09:55Z

1

Your sort compare function is close, but not quite on. You should be returning -1 for less than, 0 for equal, and 1 for greater than. See here for documentation.

Example: change return a.subject < b.subject to return a.subject < b.subject ? -1 : 1;

answered Jun 4, 2017 at 5:09

pacifier21

8131 gold badge5 silver badges13 bronze badges

2 Comments

DarkMatterMatt Over a year ago

Thanks, just got that myself :P (thanks Xufox). I can accept this answer in 5 mins.

pacifier21 Over a year ago

Glad it came to you!

Rajesh Dixit · Accepted Answer · 2017-06-04 05:20:59Z

To compare string, you should use string.localeCompare. Also, you can try to create an array with priority list and loop over it to sort.

var scipads=[{name:"L2 Physics Externals",level:2,subject:"physics"},{name:"L2 Physics Internals",level:2,subject:"physics"},{name:"L2 Chem Externals",level:2,subject:"chemistry"},{name:"L2 Chem Internals",level:2,subject:"chemistry"},{name:"L2 Bio Internals",level:2,subject:"biology"},{name:"L2 Bio Externals",level:2,subject:"biology"},{name:"L1 Electricity & Magnetism",level:1,subject:"physics"},{name:"L1 Wave Behaviour",level:1,subject:"physics"},{name:"L1 Heat",level:1,subject:"physics"},{name:"L1 Carbon Chemistry",level:1,subject:"chemistry"},{name:"L1 Selected Elements",level:1,subject:"chemistry"},{name:"L1 Chemical Reactions",level:1,subject:"chemistry"}];

var priority = ["subject", "level", "name"]

scipads.sort(function(a,b){
  var val = 0;
  priority.some(function(k){
    val = compare(a,b,k);
    return val !== 0;
  });
})

function compare(a,b,k){
  switch(typeof a[k]){
    case "string": return a[k].localeCompare(b[k]);
    case "number": return a[k] - b[k]
  }
}

console.log(scipads)

Rajesh Dixit · Accepted Answer · 2017-06-04 05:31:19Z

My solution, compare subject first, then compare the level

var scipads=[{name:"L2 Physics Externals",level:2,subject:"physics"},{name:"L2 Physics Internals",level:2,subject:"physics"},{name:"L2 Chem Externals",level:2,subject:"chemistry"},{name:"L2 Chem Internals",level:2,subject:"chemistry"},{name:"L2 Bio Internals",level:2,subject:"biology"},{name:"L2 Bio Externals",level:2,subject:"biology"},{name:"L1 Electricity & Magnetism",level:1,subject:"physics"},{name:"L1 Wave Behaviour",level:1,subject:"physics"},{name:"L1 Heat",level:1,subject:"physics"},{name:"L1 Carbon Chemistry",level:1,subject:"chemistry"},{name:"L1 Selected Elements",level:1,subject:"chemistry"},{name:"L1 Chemical Reactions",level:1,subject:"chemistry"}];

// sort by subject, then level, then name
var res = scipads.sort((a, b) => {
  if (a.subject > b.subject) {
    return 1;
  } else if (a.subject < b.subject) {
    return -1;
  } else if ( a.level > b.level){
    return 1;
  } else if (a.level < b.level) {
    return -1;
  } else if (a.name > b.name) {
    return 1;
  } else if (a.name < b.name) {
    return -1;
  }
  return 0;
});


console.log(res)

Collectives™ on Stack Overflow

JavaScript array.sort with multiple values (strings and numbers)

5 Answers 5

2 Comments

5 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related