How to sort an array of objects based on the substring of property values

Question

How can I sort the following array, in a custom order, based on the prop2's last 3 letters that have to be in this order 'ABR', 'FDE', 'ZFR' and also in descending order 'ZFR', 'FDE', 'ARB' for another array.

Sample input:

const arr = [
  { prop1: 3, prop2: '3FDE' },
  { prop1: 4, prop2: '5ZFR' },
  { prop1: 5, prop2: '7ABR' }
]

Expected output:

const arr1 = [
  { prop1: 5, prop2: '7ABR' },
  { prop1: 3, prop2: '3FDE' },
  { prop1: 4, prop2: '5ZFR' }
]

and

const arr2 = [
  { prop1: 4, prop2: '5ZFR' },
  { prop1: 3, prop2: '3FDE' },
  { prop1: 5, prop2: '7ABR' }
]

Does this answer your question? Sort array of objects by string property value — WilliamNHarvey
– WilliamNHarvey, Commented Apr 12, 2022 at 19:12
Does this answer your question? javascript - sort javascript array of objects based on the value — Raymond Chen
– Raymond Chen, Commented Apr 12, 2022 at 19:13

Majed Badawi · Accepted Answer · 2022-04-12 19:12:45Z

1

Using Array#sort, iterate over the array to sort it
In every iteration, use String#substr to get the last 3 characters and String#localeCompare to compare the two strings

const arr = [ { prop1: 3, prop2: '3FDE' }, { prop1: 4, prop2: '5ZFR' }, { 
prop1: 5, prop2: '7ABR' } ];

const _getLastThree = (str = '') => str.substr(str.length - 3);
const res = arr.sort(({ prop2: a }, { prop2: b }) => 
  _getLastThree(a).localeCompare(_getLastThree(b))
);

console.log(res);

answered Apr 12, 2022 at 19:12

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

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

3 Comments

ryy77 Over a year ago

Thank you very much! Do you know how to sort it also descending? In this order '5ZFR','3FDE','7ARB'?

Majed Badawi Over a year ago

@ryy77 you're welcome, just swap: _getLastThree(b).localeCompare(_getLastThree(a))

Carsten Massmann Over a year ago

This approach does work. However, please note that String.substr is marked as deprecated.

PeterKA · Accepted Answer · 2022-04-12 19:29:32Z

1

You can use the Array#sort, String#substring or String#slice or String#substr and the String#localCompare methods as follows:

substring

const arr = [ {prop1:4, prop2:'5ZFR'}, {prop1:5, prop2:'7ABR'}, {prop1:3, prop2:'3FDE'} ];

const output = arr.sort(
   (a,b) => 
   a.prop2.substring(1).localeCompare( b.prop2.substring(1) )
);

console.log( output );

With slice or substr you can use a negative n to indicate the last n characters:

const arr = [ {prop1:4, prop2:'5ZFR'}, {prop1:5, prop2:'7ABR'}, {prop1:3, prop2:'3FDE'} ];

const output = arr.sort(
   (a,b) => 
   a.prop2.slice(-3).localeCompare( b.prop2.slice(-3) )
);

console.log( output );

edited Apr 12, 2022 at 19:29

answered Apr 12, 2022 at 19:16

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

Carsten Massmann · Accepted Answer · 2022-04-13 12:45:58Z

1

Just use .localeCompare() in combination with .slice():

const arr=[
{prop1:5, prop2:'7ABR'},
{prop1:3, prop2:'3FDE'},
{prop1:4, prop2:'5ZFR'},
]


var ascArr,dscArr;
console.log(ascArr=arr.slice(0).sort((a,b)=>a.prop2.slice(-3).localeCompare(b.prop2.slice(-3))));

// for descending order just do 
console.log(dscArr=arr.slice(0).sort((a,b)=>-a.prop2.slice(-3).localeCompare(b.prop2.slice(-3))));

// or reverse the resulting array with 
console.log(dscArr=ascArr.reverse());

Please note that the two slice() methods belong to different prototypes: .slice(0) is an Array method that essentially creates a flat copy of the original array while .slice(-3) is a String method that "shaves off" the last three characters of the string.

edited Apr 13, 2022 at 12:45

answered Apr 12, 2022 at 19:14

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

1 Comment

ryy77 Over a year ago

Thank you very much! Do you know how to sort it also descending? In this order '5ZFR','3FDE','7ARB'?

Collectives™ on Stack Overflow

How to sort an array of objects based on the substring of property values

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related