Arranging an Array of Objects in JavaScript by dual criteria

Question

Arranging an Array of Objects in JavaScript by dual criteria

In my JavaScript code, I have an object structured like this:

myArray[0] -> 0:"62", 1:8, 2:0, 3:"11"
myArray[1] -> 0:"62", 1:8, 2:0, 3:"15"
myArray[2] -> 0:"48", 1:8, 2:0, 3:"04"
myArray[3] -> 0:"48", 1:8, 2:0, 3:"01"
myArray[4] -> 0:"62", 1:8, 2:0, 3:"12"
myArray[5] -> 0:"48", 1:8, 2:0, 3:"02"
myArray[6] -> 0:"62", 1:8, 2:0, 3:"14"
myArray[7] -> 0:"48", 1:8, 2:0, 3:"03"

I am looking to rearrange it as follows:

myArray[0] -> 0:"48", 1:8, 2:0, 3:"01"
myArray[1] -> 0:"48", 1:8, 2:0, 3:"02"
myArray[2] -> 0:"48", 1:8, 2:0, 3:"03"
myArray[3] -> 0:"48", 1:8, 2:0, 3:"04"
myArray[4] -> 0:"62", 1:8, 2:0, 3:"11"
myArray[5] -> 0:"62", 1:8, 2:0, 3:"12"
myArray[6] -> 0:"62", 1:8, 2:0, 3:"14"
myArray[7] -> 0:"62", 1:8, 2:0, 3:"15"

To achieve this ordering, I need to sort by myArray[i][0] first, and then sort by myArray[i][3] based on the initial index of myArray[i][0]. Although I've managed to sort by myArray[i][0] using

myObject.sort(function(a, b){ 
    return parseInt(a) - parseInt(b); 
});

I still need help on how to accomplish this without using any external libraries. Any guidance would be appreciated.

javascript sorting

Answer 1

Answer №1

To optimize sorting, I recommend utilizing chained comparison functions in a single run.

Understanding how the Array#sort() function operates:

When a custom compareFunction is provided, the array elements are sorted based on its return value. For two elements being compared, denoted as a and b:

If compareFunction(a, b) evaluates to less than 0, a precedes b in the sorted sequence.

If compareFunction(a, b) returns 0, a and b retain their relative positions but are sorted concerning other elements. Note: not all browsers adhere to this behavior as outlined in the ECMAscript standard.

If compareFunction(a, b) yields a value greater than 0, b comes before a in the sorted order.

The compareFunction must consistently produce the same output for a specific pair of elements a and b; otherwise, the sort outcome becomes undefined.

In the present scenario, the compare function features two sets of rules, one for sorting at index [0] and another for index [3]. If the values at index [0] are equal, then the sorting criteria at index [3] come into play. These rules are linked together using logical OR ||.

var array = [["62", 8, 0, "11"], ["62", 8, 0, "15"], ["48", 8, 0, "04"], ["48", 8, 0, "01"], ["62", 8, 0, "12"], ["48", 8, 0, "02"], ["62", 8, 0, "14"], ["48", 8, 0, "03"]];

array.sort(function (a, b) {
    return a[0].localeCompare(b[0]) || a[3].localeCompare(b[3]);
});

document.write('<pre>' + JSON.stringify(array, 0, 4) + '</pre>');

Answer 2

To optimize sorting, I recommend utilizing chained comparison functions in a single run.

Understanding how the Array#sort() function operates:

When a custom compareFunction is provided, the array elements are sorted based on its return value. For two elements being compared, denoted as a and b:

If compareFunction(a, b) evaluates to less than 0, a precedes b in the sorted sequence.

If compareFunction(a, b) returns 0, a and b retain their relative positions but are sorted concerning other elements. Note: not all browsers adhere to this behavior as outlined in the ECMAscript standard.

If compareFunction(a, b) yields a value greater than 0, b comes before a in the sorted order.

The compareFunction must consistently produce the same output for a specific pair of elements a and b; otherwise, the sort outcome becomes undefined.

In the present scenario, the compare function features two sets of rules, one for sorting at index [0] and another for index [3]. If the values at index [0] are equal, then the sorting criteria at index [3] come into play. These rules are linked together using logical OR ||.

var array = [["62", 8, 0, "11"], ["62", 8, 0, "15"], ["48", 8, 0, "04"], ["48", 8, 0, "01"], ["62", 8, 0, "12"], ["48", 8, 0, "02"], ["62", 8, 0, "14"], ["48", 8, 0, "03"]];

array.sort(function (a, b) {
    return a[0].localeCompare(b[0]) || a[3].localeCompare(b[3]);
});

document.write('<pre>' + JSON.stringify(array, 0, 4) + '</pre>');

Answer 3

Answer №2

In my view, the variable presented appears to be structured as an Array (an object indexed with integer keys). In this scenario, a possible solution could be:

var ar = [
  ["62", 8, 0, "11"],
  ["62", 8, 0, "15"],
  ["48", 8, 0, "04"],
  ["48", 8, 0, "01"],
  ["62", 8, 0, "12"],
  ["48", 8, 0, "02"],
  ["62", 8, 0, "14"],
  ["48", 8, 0, "03"]
]

var result =  ar.map(function(a) {
  return {key: a.join(''), val: a}
}).sort(function(a, b){ 
  return parseInt(a.key, 10) - parseInt(b.key, 10);
}).map(function(a) {
  return a.val
})
console.log(result)

Check out the updated version on this JSFiddle link

Edit

Alternatively, you can explore the Object approach:

var data = [{ 0:"62", 1:8, 2:0, 3:"11"},{ 0:"62", 1:8, 2:0, 3:"15"},
            { 0:"48", 1:8, 2:0, 3:"04"},{ 0:"48", 1:8, 2:0, 3:"01"},
            { 0:"62", 1:8, 2:0, 3:"12"},{ 0:"48", 1:8, 2:0, 3:"02"},
            { 0:"62", 1:8, 2:0, 3:"14"},{ 0:"48", 1:8, 2:0, 3:"03"}]

var result =  data.map(function(a) {
  return {key: [0,1,2,3].map(function(k) {return a[k]}).join(''), val: a}
}).sort(function(a, b){ 
  return parseInt(a.key, 10) - parseInt(b.key, 10);
}).map(function(a) {
  return a.val
})
console.log(result)

Access the improved version through this updated JSFiddle link

Edit 2

In response to @malixsys's feedback, a more efficient implementation is available:

var result =  data.sort(function(a, b){ 
  return parseInt(a[0]+ a[1] + a[2] + a[3], 10) - parseInt(b[0]+ b[1] + b[2] + b[3], 10);
})

You can view the optimized code by clicking on this revised JSFiddle link

Answer 4

In my view, the variable presented appears to be structured as an Array (an object indexed with integer keys). In this scenario, a possible solution could be:

var ar = [
  ["62", 8, 0, "11"],
  ["62", 8, 0, "15"],
  ["48", 8, 0, "04"],
  ["48", 8, 0, "01"],
  ["62", 8, 0, "12"],
  ["48", 8, 0, "02"],
  ["62", 8, 0, "14"],
  ["48", 8, 0, "03"]
]

var result =  ar.map(function(a) {
  return {key: a.join(''), val: a}
}).sort(function(a, b){ 
  return parseInt(a.key, 10) - parseInt(b.key, 10);
}).map(function(a) {
  return a.val
})
console.log(result)

Check out the updated version on this JSFiddle link

Edit

Alternatively, you can explore the Object approach:

var data = [{ 0:"62", 1:8, 2:0, 3:"11"},{ 0:"62", 1:8, 2:0, 3:"15"},
            { 0:"48", 1:8, 2:0, 3:"04"},{ 0:"48", 1:8, 2:0, 3:"01"},
            { 0:"62", 1:8, 2:0, 3:"12"},{ 0:"48", 1:8, 2:0, 3:"02"},
            { 0:"62", 1:8, 2:0, 3:"14"},{ 0:"48", 1:8, 2:0, 3:"03"}]

var result =  data.map(function(a) {
  return {key: [0,1,2,3].map(function(k) {return a[k]}).join(''), val: a}
}).sort(function(a, b){ 
  return parseInt(a.key, 10) - parseInt(b.key, 10);
}).map(function(a) {
  return a.val
})
console.log(result)

Access the improved version through this updated JSFiddle link

Edit 2

In response to @malixsys's feedback, a more efficient implementation is available:

var result =  data.sort(function(a, b){ 
  return parseInt(a[0]+ a[1] + a[2] + a[3], 10) - parseInt(b[0]+ b[1] + b[2] + b[3], 10);
})

You can view the optimized code by clicking on this revised JSFiddle link

Arranging an Array of Objects in JavaScript by dual criteria

Answer №1

Answer №2

Similar questions

Is there a regular expression that can identify whether a string is included in a numbered list?

AngularJS - Issue: [ng:areq] The 'fn' argument provided is not a function, instead it is a string

Issues arise when attempting to extract data from a data provider using JSON within the context of the Ionic framework

Express JS redirect does not update the URL and fails to load static files

Trouble with sending input through Ajax in HTML form

Click on the sort icon in React JS to change its state

After closing, the position of the qtip2 is being altered

Connect the dxSelectBox to the button click event

Adjust the width of the TinyMCE Editor to automatically resize based on the content being

Discovering the art of interpreting the triumphant outcome of an Ajax request with jquery/javascript

Why isn't this working? I'm attempting to trigger a sound when I hover with my cursor, but it only plays when I click instead

What is the best way to eliminate the border on Material UI's DatePicker component?

AngularJS and Handlebars (npm)

Creating methods that are shared, privileged, and publicly accessible: A guide

Guide to creating a synchronous wrapper for jQuery ajax methods

Guide on how to trigger the opening of a side panel with a button click in Vue.js

From PHP to Javascript and back to PHP

Automatically customizable CSS border thickness

Perform an action when the timer reaches zero

` Why isn't Glide.js functioning correctly when incorporated into a Bootstrap 4 modal component?`