Arranging numerical strings of an "advanced" nature in numerical sequence

Question

Arranging numerical strings of an "advanced" nature in numerical sequence

Consider the following array:

var fees = [
    '$0.9 + $0.1',
    '$20 + $2',
    '$0.7 + $0.4',
    '$5 + $0.5',
    '$0 + $0.01',
    '$100 + $9',
    '$1 + $1',
    '$2 + $0.5'
];

If I wanted to sort these string values in numeric ascending order using vanilla JavaScript, how would I go about it?

The expected output after sorting should be:

function mySort(a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}

However, this only gives me:

"$0.9 + $0.1" and "$0.7 + $0.4", the sum favors the former, but I want to prioritize the latter. Essentially, I aim to sort based on the first number in ascending order, and if the first numbers match, then consider the second number for sorting.

javascript arrays sorting numeric

Answer 1

Answer №1

Organize by the total sum of numbers within a string.

var fees = ['$0.9 + $.1', '$20 + $2', '$5 + $0.5', '$0 + $0.01', '$100 + $9', '$1 + $1', '$2 + $0.5'];

fees.sort(function(a, b) {
  return getSum(a) - getSum(b);
})

function getSum(str) {
  return str
    // remove the $ and space
    .replace(/[^\d+.]/g, '')
    //split by + symbol
    .split('+')
    // calculate the sum
    .reduce(function(sum, s) {
      // parse and add with sum
      return sum + (Number(s) || 0);
      // set initial value to sum
    }, 0)
}

console.log(fees);

You can optimize the process by utilizing an additional object that stores the sums.

var fees = ['$0.9 + $.1', '$20 + $2', '$5 + $0.5', '$0 + $0.01', '$100 + $9', '$1 + $1', '$2 + $0.5'];

var ref = fees.reduce(function(obj, str) {
  // define object property if not defined
  obj[str] = str in obj || str
    // remove the $ and space
    .replace(/[^\d+.]/g, '')
    //split by + symbol
    .split('+')
    // calculate the sum
    .reduce(function(sum, s) {
      // parse and add with sum
      return sum + (Number(s) || 0);
      // set initial value to sum
    }, 0);
  // return the object reference
  return obj;
  // set initial value as an empty object
}, {})

fees.sort(function(a, b) {
  return ref[a] - ref[b];
})

console.log(fees);

UPDATE: Since you had updated the question you need to compare the individual parts.

var fees = ['$0.9 + $.1', '$20 + $2', '$5 + $0.5', '$0 + $0.01', '$100 + $9', '$1 + $1', '$2 + $0.5'];

fees.sort(function(a, b) {
  // extract numbers from a
  var arrA = a.replace(/[^\d.+]/g, '').split('+');
  // extract numbers from b
  var arrB = b.replace(/[^\d.+]/g, '').split('+');

  // generate sort value
  return arrA[0] - arrB[0] || arrA[1] - arrB[1];
})

console.log(fees);

Answer 2

Organize by the total sum of numbers within a string.

var fees = ['$0.9 + $.1', '$20 + $2', '$5 + $0.5', '$0 + $0.01', '$100 + $9', '$1 + $1', '$2 + $0.5'];

fees.sort(function(a, b) {
  return getSum(a) - getSum(b);
})

function getSum(str) {
  return str
    // remove the $ and space
    .replace(/[^\d+.]/g, '')
    //split by + symbol
    .split('+')
    // calculate the sum
    .reduce(function(sum, s) {
      // parse and add with sum
      return sum + (Number(s) || 0);
      // set initial value to sum
    }, 0)
}

console.log(fees);

You can optimize the process by utilizing an additional object that stores the sums.

var fees = ['$0.9 + $.1', '$20 + $2', '$5 + $0.5', '$0 + $0.01', '$100 + $9', '$1 + $1', '$2 + $0.5'];

var ref = fees.reduce(function(obj, str) {
  // define object property if not defined
  obj[str] = str in obj || str
    // remove the $ and space
    .replace(/[^\d+.]/g, '')
    //split by + symbol
    .split('+')
    // calculate the sum
    .reduce(function(sum, s) {
      // parse and add with sum
      return sum + (Number(s) || 0);
      // set initial value to sum
    }, 0);
  // return the object reference
  return obj;
  // set initial value as an empty object
}, {})

fees.sort(function(a, b) {
  return ref[a] - ref[b];
})

console.log(fees);

UPDATE: Since you had updated the question you need to compare the individual parts.

var fees = ['$0.9 + $.1', '$20 + $2', '$5 + $0.5', '$0 + $0.01', '$100 + $9', '$1 + $1', '$2 + $0.5'];

fees.sort(function(a, b) {
  // extract numbers from a
  var arrA = a.replace(/[^\d.+]/g, '').split('+');
  // extract numbers from b
  var arrB = b.replace(/[^\d.+]/g, '').split('+');

  // generate sort value
  return arrA[0] - arrB[0] || arrA[1] - arrB[1];
})

console.log(fees);

Answer 3

Answer №2

A three-step algorithm can be utilized for this sorting task:

First, add the two values to be sorted by to each element
Next, sort the elements based on those added values
Finally, remove the extra information that was temporarily added

Below is the ES6 code snippet for achieving this:

var result = fees.map( s => [s].concat(s.match(/[\d.]+/g).map(Number)) )
                .sort( (a, b) => a[1] - b[1] || a[2] - b[2])
                .map( a => a[0] );

The s.match() function will generate an array with two matched strings. The subsequent map() operation will convert these strings into numerical values, and concat() will combine them with the original string to form a triplet.

The sorting comparison function will arrange the elements primarily by the first number (located at index 1), resorting to the second number if the first numbers are equal.

In the final map() call, only the original string from the triplets will be retained, discarding the additional sorting information.

The provided code sample includes an extra element in the input data ($5.1 + $0.1), showcasing the distinction between sorting by sums versus the desired sorting criteria outlined in the question.

By implementing this approach, the regular expression is applied just once per string, enhancing performance compared to integrating it within a sort callback where repeated comparisons may occur.

Answer 4

A three-step algorithm can be utilized for this sorting task:

First, add the two values to be sorted by to each element
Next, sort the elements based on those added values
Finally, remove the extra information that was temporarily added

Below is the ES6 code snippet for achieving this:

var result = fees.map( s => [s].concat(s.match(/[\d.]+/g).map(Number)) )
                .sort( (a, b) => a[1] - b[1] || a[2] - b[2])
                .map( a => a[0] );

The s.match() function will generate an array with two matched strings. The subsequent map() operation will convert these strings into numerical values, and concat() will combine them with the original string to form a triplet.

The sorting comparison function will arrange the elements primarily by the first number (located at index 1), resorting to the second number if the first numbers are equal.

In the final map() call, only the original string from the triplets will be retained, discarding the additional sorting information.

The provided code sample includes an extra element in the input data ($5.1 + $0.1), showcasing the distinction between sorting by sums versus the desired sorting criteria outlined in the question.

By implementing this approach, the regular expression is applied just once per string, enhancing performance compared to integrating it within a sort callback where repeated comparisons may occur.

Answer 5

Answer №3

To organize the strings, you can extract their components, calculate the sum, and determine the difference between two elements for sorting purposes.

var charges = ['$0.9 + $.1', '$20 + $2', '$5 + $0.5', '$0 + $0.01', '$100 + $9', '$1 + $1', '$2 + $0.5'];

charges.sort(function (a, b) {
    function fetchValues(str) {
        return str.match(/([0-9.]+)/g).map(Number);
    }
    
    var firstCharge = fetchValues(a),
        secondCharge = fetchValues(b);
    return firstCharge[0] + firstCharge[1] - (secondCharge[0] + secondCharge[1]);
});

console.log(charges);

Answer 6

To organize the strings, you can extract their components, calculate the sum, and determine the difference between two elements for sorting purposes.

var charges = ['$0.9 + $.1', '$20 + $2', '$5 + $0.5', '$0 + $0.01', '$100 + $9', '$1 + $1', '$2 + $0.5'];

charges.sort(function (a, b) {
    function fetchValues(str) {
        return str.match(/([0-9.]+)/g).map(Number);
    }
    
    var firstCharge = fetchValues(a),
        secondCharge = fetchValues(b);
    return firstCharge[0] + firstCharge[1] - (secondCharge[0] + secondCharge[1]);
});

console.log(charges);

Arranging numerical strings of an "advanced" nature in numerical sequence

Answer №1

Answer №2

Answer №3

Similar questions

How can you use Angular to copy a value from one field to another through coding?

There appears to be a JavaScript validation error occurring on the current page, however, you are able

"Successfully tested API request in Postman, however encountering issues when sending request in Node.js using the 'request

How can I store an access token received from the backend (in JSON format) in local storage and use it to log in?

Concealing the NavBar When Showing a Popup Using React

Should Angular libraries be developed using Typescript or transpiled into JavaScript?

Retrieve the weekday dates for a specific year, month, and relative week number using Javascript or Typescript

Issue encountered: Failure in automating login through Cypress UI with Keycloak

Why isn't JQuery's .prependTo('body') function functioning correctly?

I am looking for a way to save a webpage as .html/.png format after entering text in the text box. Here is the code I have

"Is there a way to determine the height of an inline element, such as a span element,

How to create a calendar selection input using PHP?

Is it possible to track and listen for the download complete event while using an anchor tag to initiate the download process?

The bar graph dataset is not correctly configured when utilizing ng2 charts and ng5-slider within an Angular framework

Is it possible to utilize Math.Round within the <return> tag when coding in React?

Combining React with Typescript allows for deep merging of nested defaultProps

Overcome the issue of 'Parsing Error: Kindly verify your selector. (line XX)' in Javascript/AWQL

Drawing mysteriously disappeared from the canvas

Expanding the canvas leads to the freezing of the Ionic app on the emulator

Is there a way to extract SVG data from the Echarts library in AngularJS?