Re-sorting with _.sortBy() eliminates additional 0s from decimal values (transforming 0.10 to 0.1 and beyond)

Question

Re-sorting with _.sortBy() eliminates additional 0s from decimal values (transforming 0.10 to 0.1 and beyond)

Here is an array that needs to be sorted:

var baseBetAmount = [
{
    val: 'OtherBaseBet',
    text: 'Other'
},
{
    val: 0.10,
    text: '$0.10'
},
{
    val: 0.20,
    text: '$0.20'
},
{
    val: 0.50,
    text: '$0.50'
},
{
    val: 1,
    text: '$1'
},
{
    val: 2,
    text: '$2'
}]

I have tried to sort it using the following function:

var options=  _.sortBy(baseBetAmount)

The output after sorting looks like this:

[
{
    val: 'OtherBaseBet',
    text: 'Other'
},
{
    val: 0.1,
    text: '$0.10'
},
{
    val: 0.2,
    text: '$0.20'
},
{
    val: 0.5,
    text: '$0.50'
},
{
    val: 1,
    text: '$1'
},
{
    val: 2,
    text: '$2'
}]

However, the issue is that numbers such as 0.10 are being replaced by 0.1 in the sorted array. I need help to prevent this from happening.

javascript underscore.js lodash

Answer 1

Answer №1

This is a viable solution, but it requires parsing the value for mathematical calculations.

var baseBetAmount = [
{
    val: 'OtherBaseBet',
    text: 'Other'
},
{
    val: 0.10,
    text: '$0.10'
},
{
    val: 0.20,
    text: '$0.20'
},
{
    val: 0.50,
    text: '$0.50'
},
{
    val: 1,
    text: '$1'
},
{
    val: 2,
    text: '$2'
}];

 var options = _.sortBy(baseBetAmount).map(function(base){
 if(_.isNumber(base.val)){
 base.val = base.val.toFixed(2);
 }
 return base;
 });

console.log(options);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
</body>
</html>

toFixed() converts the value to a string, so it must be parsed with parseFloat for any mathematical operations.

Answer 2

This is a viable solution, but it requires parsing the value for mathematical calculations.

var baseBetAmount = [
{
    val: 'OtherBaseBet',
    text: 'Other'
},
{
    val: 0.10,
    text: '$0.10'
},
{
    val: 0.20,
    text: '$0.20'
},
{
    val: 0.50,
    text: '$0.50'
},
{
    val: 1,
    text: '$1'
},
{
    val: 2,
    text: '$2'
}];

 var options = _.sortBy(baseBetAmount).map(function(base){
 if(_.isNumber(base.val)){
 base.val = base.val.toFixed(2);
 }
 return base;
 });

console.log(options);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
</body>
</html>

toFixed() converts the value to a string, so it must be parsed with parseFloat for any mathematical operations.

Re-sorting with _.sortBy() eliminates additional 0s from decimal values (transforming 0.10 to 0.1 and beyond)

Answer №1

Similar questions

What is the best way to store and serve the AngularJS library locally in a static manner?

The useEffect function is executing two times

Learn the process of dynamically adding components with data to a list of objects using React JS

Concealing div containers and eliminating gaps

Tips for locating precise information within nested object formations using Javascript

Prevent page refresh when submitting a form using PureCSS while still keeping form validation intact

Obtaining your CSGO inventory via Steam API using jsonp: A step-by-step guide

Creating a Login Form with Node.js and MongoDB

Sending parameters with $location.path() in AngularJS

Tips for updating parameters that are defined in a controller within a promise

Resource loading unsuccessful: server returned a 401 status code for React webpage

Create a PDF document and provide a reply

Utilizing a server for seamless communication between a mobile device and a website

How to integrate angular-ui-bootstrap with webpack

jQuery mobile : accessibility helper for hidden elements

Vanish Dropdown upon clicking Using JavaScript

"Retrieving the most recent data within an ng-repeat directive using AngularJS

Seems like JavaScript's .active functionality is failing to function properly in my case

Ways to extract all hyperlinks from a website using puppeteer

Using an alias to call a function defined in a separate module in TypeScript