Guide on organizing an array of objects by the sub-part of their property values

Question

Guide on organizing an array of objects by the sub-part of their property values

Is there a way to order the elements in the given array based on a custom criteria related to the last 3 letters of 'prop2' in descending order? The specific order should be 'ABR', 'FDE', 'ZFR'. Another array needs to be sorted with the order 'ZFR', 'FDE', 'ARB'.

Input example:

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

Desired 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' }
]

javascript arrays

Answer 1

Answer №1

Sort the array by iterating over it using Array#sort
For each iteration, extract the last 3 characters of a string with String#substr and compare them using String#localeCompare

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);

Answer 2

Sort the array by iterating over it using Array#sort
For each iteration, extract the last 3 characters of a string with String#substr and compare them using String#localeCompare

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);

Answer 3

Answer №2

To manipulate and sort arrays or strings in JavaScript, you have several methods at your disposal such as Array#sort, String#substring, String#slice, String#substr, and String#localCompare.

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 );

Another option is to utilize the slice or substr method with a negative value to extract and compare the last 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 );

Answer 4

To manipulate and sort arrays or strings in JavaScript, you have several methods at your disposal such as Array#sort, String#substring, String#slice, String#substr, and String#localCompare.

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 );

Another option is to utilize the slice or substr method with a negative value to extract and compare the last 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 );

Answer 5

Answer №3

To achieve this, simply utilize the .localeCompare() method along with the .slice() function:

const data=[
{val1:8, val2:'HJKR'},
{val1:6, val2:'7FDE'},
{val1:9, val2:'ABCZ'},
]


var ascendingArr, descendingArr;
console.log(ascendingArr=data.slice(0).sort((a,b)=>a.val2.slice(-3).localeCompare(b.val2.slice(-3))));

// For a descending order, use
console.log(descendingArr=data.slice(0).sort((a,b)=>-a.val2.slice(-3).localeCompare(b.val2.slice(-3)));

// Alternatively, reverse the array obtained 
console.log(descendingArr=ascendingArr.reverse());

It's important to recognize that the two usage instances of slice() are associated with different prototypes: .slice(0) is tied to an Array, creating a duplicate array copy, while .slice(-3) pertains to a String, removing the last three characters from it.

Answer 6

To achieve this, simply utilize the .localeCompare() method along with the .slice() function:

const data=[
{val1:8, val2:'HJKR'},
{val1:6, val2:'7FDE'},
{val1:9, val2:'ABCZ'},
]


var ascendingArr, descendingArr;
console.log(ascendingArr=data.slice(0).sort((a,b)=>a.val2.slice(-3).localeCompare(b.val2.slice(-3))));

// For a descending order, use
console.log(descendingArr=data.slice(0).sort((a,b)=>-a.val2.slice(-3).localeCompare(b.val2.slice(-3)));

// Alternatively, reverse the array obtained 
console.log(descendingArr=ascendingArr.reverse());

It's important to recognize that the two usage instances of slice() are associated with different prototypes: .slice(0) is tied to an Array, creating a duplicate array copy, while .slice(-3) pertains to a String, removing the last three characters from it.

Guide on organizing an array of objects by the sub-part of their property values

Answer №1

Answer №2

Answer №3

Similar questions

I am having trouble with setInterval not functioning as expected. I am trying to make a function repeat every 500ms using setInterval, but it seems to be ineffective

Update the useMemo state value after the initial function block has been executed

Discovering elements that are currently visible in an Angular list

How come the array's length is not appearing on the browser screen?

Output the value of each key from an array only if the corresponding key in a second array

Node JS Promise does not provide a value as a return

Modifying the CSS design of specific columns within a table created using JavaScript

Managing an unexpected variable when making an AJAX request

Creating DIV's with Equal Heights Using AngularJS ng-repeat

python using selenium to bypass javascript popups

The validation feature in 1000hz Bootstrap seems to be malfunctioning

Utilizing an Immediate-Invoked Function Expression (IIFE) for jQuery in JavaScript

Managing multiple changes in input values within an object

Struggling to implement .indexOf() in conjunction with .filter()

Automatically redirect to the linked page once the video concludes

Using AngularJS to pass objects dynamically through ng-include

"Can you tell me the method for obtaining an array within an Angular

Adjusting canvas context position after resizing

Code for Custom Controllers in Strapi Beta version 3.0

Tips for managing the second datepicker for the return journey on Abhibus using Selenium webdriver