Sort an array in descending order based on the key using JavaScript in Google Chrome

Question

Sort an array in descending order based on the key using JavaScript in Google Chrome

Having an issue with sorting an array in descending order by the key. It works perfectly in Firefox, but Chrome is displaying it in the original order.

[["0", 0], ["1", 0.9], ["2", 597.5344192965547], ["3", 991.0326954186761], ["4", 1257.2580315846578], ["5", 1293.5250901880618], ["6", 2197.1091224116512], ["7", 2225.0422585266947], ["8", 3964.1307816747044], ["9", 6914.072436146399]]

This is the function I'm using:

sortable.sort(function(a,b){return b-a})

Firefox returns the correct result:

[["9", 6914.072436146399], ["8", 3964.1307816747044], ["7", 2225.0422585266947], ["6", 2197.1091224116512], ["5", 1293.5250901880618], ["4", 1257.2580315846578], ["3", 991.0326954186761], ["2", 597.5344192965547], ["1", 0.9], ["0", 0]]

However, Google Chrome doesn't sort the array as expected.

javascript arrays google-chrome sorting

Answer 1

Answer №1

Your task involves sorting an array of arrays where the outer array is labeled as "sortable." The issue arises when your sorting function uses the subtraction operator on array instances. For example, when calling the `sort` method, you may end up comparing arrays like `["0", 0]` and `["1", 0.9]`. This comparison looks like this within the function:

return ["0", 0] - ["1", 0.9];

By using the `-` operator on these operands, JavaScript attempts to convert them into numbers, often resulting in `NaN`. And since subtracting two `NaN` values also results in `NaN`, it violates the expected behavior of a sorting comparator callback.

To address this issue, it seems you want to sort based on the first element of each inner array. To achieve this, you can modify your sorting function as follows:

sortable.sort(function(a,b){return b[0]-a[0]})

(Notice the `[0]` after each array reference.) This adjustment ensures that the strings representing the first elements are converted to numbers before the subtraction operation takes place. Alternatively, you could explicitly convert these strings to numbers with a specific radix:

sortable.sort(function(a,b){return parseInt(b[0], 10) - parseInt(a[0], 10)})

Answer 2

Your task involves sorting an array of arrays where the outer array is labeled as "sortable." The issue arises when your sorting function uses the subtraction operator on array instances. For example, when calling the `sort` method, you may end up comparing arrays like `["0", 0]` and `["1", 0.9]`. This comparison looks like this within the function:

return ["0", 0] - ["1", 0.9];

By using the `-` operator on these operands, JavaScript attempts to convert them into numbers, often resulting in `NaN`. And since subtracting two `NaN` values also results in `NaN`, it violates the expected behavior of a sorting comparator callback.

To address this issue, it seems you want to sort based on the first element of each inner array. To achieve this, you can modify your sorting function as follows:

sortable.sort(function(a,b){return b[0]-a[0]})

(Notice the `[0]` after each array reference.) This adjustment ensures that the strings representing the first elements are converted to numbers before the subtraction operation takes place. Alternatively, you could explicitly convert these strings to numbers with a specific radix:

sortable.sort(function(a,b){return parseInt(b[0], 10) - parseInt(a[0], 10)})

Sort an array in descending order based on the key using JavaScript in Google Chrome

Answer №1

Similar questions

Enable automatic scrolling for CSS overflow: scroll feature

Guide on retrieving a file through an HTTP request with restricted cross-origin access restrictions

Using Jquery to load Intranet HTML files

Using JavaScript to link buttons and dynamically change their colors

An Illustrative Example of Inheritance in Javascript?

Creating a custom titlebar with Electron and Vue: How to accurately determine the window's maximized or restored state from within a component

Mastering the use of expressions in ng-click and ng-show in AngularJS

Seeking further clarification on the topic of `custom Directive` in AngularJS

Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

As the window size decreases, adjust the negative left margin to increase dynamically

Async function captures error being thrown

When using Laravel with jQuery Ajax, the search for the file address is unsuccessful

I'm looking to leverage useEffect in React Native to effectively manage and store arrays - any tips on how

What is the method for determining the coordinate range in a three.js environment?

What are some best practices for utilizing `element.offsetParent` in HTML SVG elements?

Navigating through a JSON dictionary in Svelte: A step-by-step guide

Troubleshooting: My jQuery script for fading in content upon document ready is not

Resolving the problem of degrading image quality in HTML Canvas

Retrieving rows from a MySQL table that contain a specified BIGINT from an array parameter

Verify and generate a notification if the value is null