Lodash sort incorrect with Alphanumberic? - lodash

Question

I'm using lodash to sort Array.
Ex:
const arr = [ { name: 'Card 2' }, { name: 'Card 1' }, { name: 'Card 10' }]
Sort:
lodash.orderBy(arr, ['name'], ['asc'])
Result:
[{ name: 'Card 1' }, { name: 'Card 10' }, { name: 'Card 2' }]
How I can resolve it?
My expect the result should be:
[ { name: 'Card 1' }, { name: 'Card 2' }, { name: 'Card 10' }]

Answer 1

It is correct. You are sorting lexicographically. Just like the "aardvark" goes after "a" and before "b", so does "10" go after "1" but before "2". If you want to sort it numerically, you would need to extract the number.
Here, I split each array into alphabetic and numeric portions, then pad the numeric portions with zeroes so that they can be compared like strings (e.g. "Card 0000000000000010"):
const arr = [ { name: 'Card 2' }, { name: 'Card 1' }, { name: 'Card 10' }, { name: 'Document 1' }]
const sortedArr = _.sortBy(arr, [function(o) {
const split = o.name.split(/\b(\d+)\b/);
for (let i = 1; i < split.length; i += 2) {
split[i] = split[i].padStart(16, '0');
}
return split.join('');
}]);
console.log(sortedArr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Answer 2

If you expect your items to have numbers only at the end, then you can define your own sorting comparator and perform the following logic:
Take any part of the item before from the beginning until any number from each item and compare them alphabetically.
If equal, then compare the numbers from the end numerically.
To do this, you can just pass two iteratees to orderBy:
You can easily achieve that with the /^[^\d]*/ regex.
That can be done using the /\d*$/ regex and converting to a number.
const arr = [ { name: 'Card 2' }, { name: 'Card 1' }, { name: 'Card 10' }, { name: 'Alpha 2' }, { name: 'Alpha 1' }, { name: 'Alpha 10' }, { name: 'Beta 2' }, { name: 'Beta 1' }, { name: 'Beta' }, { name: '2' }, { name: '1' }, { name: '10' },{ name: 'Gamma' }, { name: 'Delta' },]
const extractString = item => item.name.match(/^[^\d]*/)[0];
const extractNumber = item => Number(item.name.match(/\d*$/)[0]);
const sorted = _.orderBy(arr, [extractString, extractNumber], ['asc']);
console.log(sorted);
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.15/lodash.min.js"></script>