Process for arranging an array according to the sorting sequence of another

Question

Process for arranging an array according to the sorting sequence of another

Using two arrays in a Highcharts "series" parameter, for example:

X = [25, 100, 50, 12]
Y = [50, 12, 100, 25]

The sequence of X and Y corresponds to the chart's Y value. When sorting X in ascending order, Y's order should match by becoming:

X = [12, 25, 50, 100]
Y = [25, 50, 100, 12]

A more sophisticated approach is needed rather than just using a basic sorting algorithm simultaneously on both arrays. Creating a data structure that links the values in these arrays together would allow for efficient sorting of one array with respect to the other.

The challenge lies in finding an object or data structure that can store and retrieve these two arrays together for integration into Highcharts. One concern is that plain JavaScript objects may not guarantee maintaining the order of elements, so it's important to consider alternative approaches.

javascript arrays sorting

Answer 1

Answer №1

To organize an array based on a custom sort order, you can create an array that contains the indexes of the desired sort sequence. Then, you can apply this sort order to any array you choose:

let arr1 = [25, 100, 50, 12]
let arr2 = [50, 12, 100, 25]

// define the sort order array based on arr1
let sort_order = Array.from(arr1, (_, i) => i).sort((a,b) => arr1[a] - arr1[b])

let arr1_sorted = sort_order.map(i => arr1[i])
let arr2_sorted = sort_order.map(i => arr2[i])

console.log(arr1_sorted, arr2_sorted)

Answer 2

To organize an array based on a custom sort order, you can create an array that contains the indexes of the desired sort sequence. Then, you can apply this sort order to any array you choose:

let arr1 = [25, 100, 50, 12]
let arr2 = [50, 12, 100, 25]

// define the sort order array based on arr1
let sort_order = Array.from(arr1, (_, i) => i).sort((a,b) => arr1[a] - arr1[b])

let arr1_sorted = sort_order.map(i => arr1[i])
let arr2_sorted = sort_order.map(i => arr2[i])

console.log(arr1_sorted, arr2_sorted)

Answer 3

Answer №2

Consider the alternative approach of generating an object with a and b properties for each item, sorting this array of objects, and then separating them back into their individual arrays:

const A = [25, 100, 50, 12];
const B = [50, 12, 100, 25];
const arr = A.map((a, i) => ({ a, b:B[i] }));
arr.sort((item1, item2) => item1.a - item2.a);
const [newA, newB] = arr.reduce(([newA, newB], { a: itemA, b: itemB }) => {
  newA.push(itemA);
  newB.push(itemB);
  return [newA, newB];
}, [[],[]]);
console.log(newA, newB);

Although this method may appear more functional, your original implementation, while simplistic, could potentially be faster for large inputs as it avoids the creation of intermediary arrays and objects.

Answer 4

Consider the alternative approach of generating an object with a and b properties for each item, sorting this array of objects, and then separating them back into their individual arrays:

const A = [25, 100, 50, 12];
const B = [50, 12, 100, 25];
const arr = A.map((a, i) => ({ a, b:B[i] }));
arr.sort((item1, item2) => item1.a - item2.a);
const [newA, newB] = arr.reduce(([newA, newB], { a: itemA, b: itemB }) => {
  newA.push(itemA);
  newB.push(itemB);
  return [newA, newB];
}, [[],[]]);
console.log(newA, newB);

Although this method may appear more functional, your original implementation, while simplistic, could potentially be faster for large inputs as it avoids the creation of intermediary arrays and objects.

Answer 5

Answer №3

Your initial concept isn't as terrible as you might think - just organize one array and rearrange the other without considering its contents. Nonetheless, I do agree that there is a more efficient way to approach this task in terms of organizing and identifying your data.

Considering that your two arrays are essentially pairs of {a, b}, you can consolidate all the data into a single array:

const consolidatedData = [{a: 25, b: 50}, {a: 100, b: 12}, {a: 50, b: 100}, {a: 12, b: 25}];

From here, it becomes straightforward to sort the array based on either key using a sorting function:

// Function to sort items by a specified key
const sortByKey = key => {return (itemA, itemB) => itemA[key] > itemB[key]};

consolidatedData.sort(sortByKey("a"));
// The array is now sorted with "a" keys in ascending order
consolidatedData.sort(sortByKey("b"));
// The array is now sorted with "b" keys in ascending order

If you need to separate the array back into two individual arrays, simply utilize Array.map():

const aValues = consolidatedData.map(item => item.a);
const bValues = consolidatedData.map(item => item.b);

Answer 6

Your initial concept isn't as terrible as you might think - just organize one array and rearrange the other without considering its contents. Nonetheless, I do agree that there is a more efficient way to approach this task in terms of organizing and identifying your data.

Considering that your two arrays are essentially pairs of {a, b}, you can consolidate all the data into a single array:

const consolidatedData = [{a: 25, b: 50}, {a: 100, b: 12}, {a: 50, b: 100}, {a: 12, b: 25}];

From here, it becomes straightforward to sort the array based on either key using a sorting function:

// Function to sort items by a specified key
const sortByKey = key => {return (itemA, itemB) => itemA[key] > itemB[key]};

consolidatedData.sort(sortByKey("a"));
// The array is now sorted with "a" keys in ascending order
consolidatedData.sort(sortByKey("b"));
// The array is now sorted with "b" keys in ascending order

If you need to separate the array back into two individual arrays, simply utilize Array.map():

const aValues = consolidatedData.map(item => item.a);
const bValues = consolidatedData.map(item => item.b);

Process for arranging an array according to the sorting sequence of another

Answer №1

Answer №2

Answer №3

Similar questions

Fastify route handler failing to start after onRequest hook is executed

Javascript textbox and submit button

What is the best way to display information from an array that is nested within an object retrieved from an API using

Arranging uneven lists in ascending order according to the values in the third column of the first row of each list

Retrieve the contents of the browser's DOM from within an Android operating system runtime

Struggling with sending intricate model to controller via ajax request

Interactive HTML5 canvas: Dragging and dropping multiple items

Contrast data from two arrays and create a fresh array

Search for specific parameters in an array and retrieve them

Unable to retrieve data from the JSON object

Could anyone provide an explanation of the current situation in this section of the code?

Tips for clearing a textbox value in JQuery after a 5-second delay

Utilize Meteor-tabular to effortlessly export data with convenient HTML5 export buttons

JavaScript Slider for Color Selection

recognizing individuals when a particular action is taken or when there is a disruption

Encountering a challenge when attempting to upgrade to Angular 9: Issue with transitioning undecorated classes with DI migration

Include parameters for a pagination system

Is there a way to create a new prettyphoto window by clicking on a link within the original prettyphoto window?

Browserify does not provide access to the require function in the browser environment

Utilize React to reduce, replace, and encapsulate content within a span element