I have the following array of objects:

const myList = [
  { id: 1, title: '[A] Animal Bite - F - Not Pregnant' },
  { id: 2, title: '[P] Sinus Pain - M' },
  { id: 3, title: '[A] Animal Bite - F - Pregnant' },
  { id: 4, title: 'Check up male' },
  { id: 5, title: '[A] Animal Bite - M' },
  { id: 6, title: 'Duration' },
  { id: 7, title: '[P] Skin Injury - F - Not Pregnant' },
  { id: 8, title: '[P] Skin Injury - M' },
  { id: 9, title: 'Emergency Screening' }
]

After doing:

_.sortBy(myList, 'title');

I get:

Check up male
Duration
Emergency Screening
[A] Animal Bite - F - Not Pregnant
[A] Animal Bite - F - Pregnant
[A] Animal Bite - M
[P] Sinus Pain - M
[P] Skin Injury - F - Not Pregnant
[P] Skin Injury - M

It looks good except I want the items without [A] or [P] to be at the bottom instead of the top. So like this instead:

[A] Animal Bite - F - Not Pregnant
[A] Animal Bite - F - Pregnant
[A] Animal Bite - M
[P] Sinus Pain - M
[P] Skin Injury - F - Not Pregnant
[P] Skin Injury - M
Check up male
Duration
Emergency Screening

How to achieve this?

I have the following array of objects:

const myList = [
  { id: 1, title: '[A] Animal Bite - F - Not Pregnant' },
  { id: 2, title: '[P] Sinus Pain - M' },
  { id: 3, title: '[A] Animal Bite - F - Pregnant' },
  { id: 4, title: 'Check up male' },
  { id: 5, title: '[A] Animal Bite - M' },
  { id: 6, title: 'Duration' },
  { id: 7, title: '[P] Skin Injury - F - Not Pregnant' },
  { id: 8, title: '[P] Skin Injury - M' },
  { id: 9, title: 'Emergency Screening' }
]

After doing:

_.sortBy(myList, 'title');

I get:

Check up male
Duration
Emergency Screening
[A] Animal Bite - F - Not Pregnant
[A] Animal Bite - F - Pregnant
[A] Animal Bite - M
[P] Sinus Pain - M
[P] Skin Injury - F - Not Pregnant
[P] Skin Injury - M

It looks good except I want the items without [A] or [P] to be at the bottom instead of the top. So like this instead:

[A] Animal Bite - F - Not Pregnant
[A] Animal Bite - F - Pregnant
[A] Animal Bite - M
[P] Sinus Pain - M
[P] Skin Injury - F - Not Pregnant
[P] Skin Injury - M
Check up male
Duration
Emergency Screening

How to achieve this?

• javascript
• underscore.js
• lodash

5 Answers 5

lodash's sortBy may take list of parators. So you can just declare "words don't start from square bracket go later" and inside the "group" sort by title

_.sortBy(myList, [
    item => !item.title.startsWith("["), 
    'title'
]);

And with orderBy you even can specify ordering in more readable(and flexible) way:

_.orderBy(myList, [
    item => item.title.startsWith("["), 
    'title'
], ['desc', 'asc']);

[UPD] with startsWith mentioned by @Ele it looks even better

If you really want to use lodash, you can pare the titles in lower-case:

_.sortBy(myList, item => item.title.toLowerCase());

This works because the code unit of the lower-case characters (97 - 122) is greater than the one of [ (91). This would also have the benefit of paring the titles case-insensitively.

This is an alternative using the function Array.prototype.sort()

Assuming the there is max one [ in the string.

const myList = [  { id: 1, title: '[A] Animal Bite - F - Not Pregnant' },  { id: 2, title: '[P] Sinus Pain - M' },  { id: 3, title: '[A] Animal Bite - F - Pregnant' },  { id: 4, title: 'Check up male' },  { id: 5, title: '[A] Animal Bite - M' },  { id: 6, title: 'Duration' },  { id: 7, title: '[P] Skin Injury - F - Not Pregnant' },  { id: 8, title: '[P] Skin Injury - M' },  { id: 9, title: 'Emergency Screening' }];

myList.sort((a, b) => {
  if (a.title.startsWith("[") && b.title.startsWith("[")) {
    return a.title.substring(1).localeCompare(b.title.substring(1)); 
  } 
  
  return a.title.localeCompare(b.title);
});

console.log(myList);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Use localeCompare with numeric: false option in the sort function:

const list = [ { id: 1, title: '[A] Animal Bite - F - Not Pregnant' }, { id: 2, title: '[P] Sinus Pain - M' }, { id: 3, title: '[A] Animal Bite - F - Pregnant' }, { id: 4, title: 'Check up male' }, { id: 5, title: '[A] Animal Bite - M' }, { id: 6, title: 'Duration' }, { id: 7, title: '[P] Skin Injury - F - Not Pregnant' }, { id: 8, title: '[P] Skin Injury - M' }, { id: 9, title: 'Emergency Screening' } ] 

const r = list.sort((a,b) => a.title.localeCompare(b.title, 0, {numeric: false}))

console.log(r)

Another way you can also get the same result is via the {caseFirst: lower'} option parameter as noted (and explained) by @xehpuk asnwer:

const list = [ { id: 1, title: '[A] Animal Bite - F - Not Pregnant' }, { id: 2, title: '[P] Sinus Pain - M' }, { id: 3, title: '[A] Animal Bite - F - Pregnant' }, { id: 4, title: 'Check up male' }, { id: 5, title: '[A] Animal Bite - M' }, { id: 6, title: 'Duration' }, { id: 7, title: '[P] Skin Injury - F - Not Pregnant' }, { id: 8, title: '[P] Skin Injury - M' }, { id: 9, title: 'Emergency Screening' } ] 

const r = list.sort((a,b) => a.title.localeCompare(b.title, 0, {caseFirst: 'lower'}))

console.log(r)

You also do not need lodash for this if ES6 is an option.

You could move the brackets parts to top by checking the strings, then takes the local pare result.

const
    startsWithBrackets = s => /^\[.+\]/.test(s),
    myList = [{ id: 1, title: '[A] Animal Bite - F - Not Pregnant' }, { id: 2, title: '[P] Sinus Pain - M' }, { id: 3, title: '[A] Animal Bite - F - Pregnant' }, { id: 4, title: 'Check up male' }, { id: 5, title: '[A] Animal Bite - M' }, { id: 6, title: 'Duration' }, { id: 7, title: '[P] Skin Injury - F - Not Pregnant' }, { id: 8, title: '[P] Skin Injury - M' }, { id: 9, title: 'Emergency Screening' }];

myList.sort(({ title: a }, { title: b }) =>
    startsWithBrackets(b) - startsWithBrackets(a) || a.localeCompare(b));

console.log(myList);

.as-console-wrapper { max-height: 100% !important; top: 0; }