Trimming decimal points from large numbers using Javascript

Question

Trimming decimal points from large numbers using Javascript

Having trouble with a function that is supposed to format numbers in a more visually appealing way. It's glitchy - for example, 400 displays as 4H, which is correct. However, 430 displays as 4.3H, which is acceptable, but then 403 displays as 4.03H, which is not ideal. Here is my code, and I'm unsure how to fix it.

EDIT: When larger numbers come into play, like 5003 displaying as 5.003K instead of just 5K, it creates issues. I want all numbers to display properly without excess decimals. For instance:

5000 -> 5K
5500 -> 5.5k
5050 -> 5.05k
5005 -> 5K

 <!-- Slight modifications made to the code block below for uniqueness -->
                var ranges = [
                    { divider: 1000000000000000000000000000000000 , suffix: 'Dec' },
                    { divider: 1000000000000000000000000000000 , suffix: 'Non' },
                    // Other range objects remain unchanged
                ];
                
                // Function remains unchanged

.wrapper {
  position: fixed;
  top: 35%;
  left: 35%;
}

<!-- HTML content here -->

javascript

Answer 1

Answer №1

It seems like there are some issues in your code

if (rounded == true), the input value from the number field will never be true.
INP(num, true) - you are passing true as an argument, which is not expected according to your code. The expected parameter should be a number.
if (round == null) is also always false. If the second input field is empty, the value would be an empty string and not null. Therefore, it should be changed to if (round == '')

var ranges = [{
  divider: 1000000000000000000000000000000000,
  suffix: 'Dec'
}, {
  divider: 1000000000000000000000000000000,
  suffix: 'Non'
}, {
  divider: 1000000000000000000000000000,
  suffix: 'Oct'
}, {
  divider: 1000000000000000000000000,
  suffix: 'Sep'
}, {
  divider: 1000000000000000000000,
  suffix: 'Sex'
}, {
  divider: 1000000000000000000,
  suffix: 'Quin'
}, {
  divider: 1000000000000000,
  suffix: 'Quad'
}, {
  divider: 1000000000000,
  suffix: 'T'
}, {
  divider: 1000000000,
  suffix: 'B'
}, {
  divider: 1000000,
  suffix: 'M'
}, {
  divider: 1000,
  suffix: 'K'
}, {
  divider: 100,
  suffix: 'H'
}];

function INP(number, round) {
  for (var i = 0; i < ranges.length; i++) {
    if (number >= ranges[i].divider) {
      if (round == '') {
        return (number / ranges[i].divider) + ranges[i].suffix;
      } else {
        var res = (number / ranges[i].divider).toFixed(round),
          fr = res - parseInt(res, 10);
        return (fr > 0 ? res : parseInt(res, 10)) + ranges[i].suffix;
      }
    }
  }
  return number.toString();
}

.wrapper {
  position: fixed;
  top: 35%;
  left: 35%;
}

<div class="wrapper">
  <input type="number" id="num" placeholder="number">
  <br>
  <input type="number" id="rounded" placeholder="round">
  <div id="output"></div>
</div>
<script>
  var field = document.getElementById("num");
  var div = document.getElementById("output");

  field.onkeyup = function() {
    var num = document.getElementById("num").value;
    var rounded = document.getElementById("rounded").value;

    var output = INP(num, rounded);

    div.innerHTML = "Output: " + output;
  }
</script>

Answer 2

It seems like there are some issues in your code

if (rounded == true), the input value from the number field will never be true.
INP(num, true) - you are passing true as an argument, which is not expected according to your code. The expected parameter should be a number.
if (round == null) is also always false. If the second input field is empty, the value would be an empty string and not null. Therefore, it should be changed to if (round == '')

var ranges = [{
  divider: 1000000000000000000000000000000000,
  suffix: 'Dec'
}, {
  divider: 1000000000000000000000000000000,
  suffix: 'Non'
}, {
  divider: 1000000000000000000000000000,
  suffix: 'Oct'
}, {
  divider: 1000000000000000000000000,
  suffix: 'Sep'
}, {
  divider: 1000000000000000000000,
  suffix: 'Sex'
}, {
  divider: 1000000000000000000,
  suffix: 'Quin'
}, {
  divider: 1000000000000000,
  suffix: 'Quad'
}, {
  divider: 1000000000000,
  suffix: 'T'
}, {
  divider: 1000000000,
  suffix: 'B'
}, {
  divider: 1000000,
  suffix: 'M'
}, {
  divider: 1000,
  suffix: 'K'
}, {
  divider: 100,
  suffix: 'H'
}];

function INP(number, round) {
  for (var i = 0; i < ranges.length; i++) {
    if (number >= ranges[i].divider) {
      if (round == '') {
        return (number / ranges[i].divider) + ranges[i].suffix;
      } else {
        var res = (number / ranges[i].divider).toFixed(round),
          fr = res - parseInt(res, 10);
        return (fr > 0 ? res : parseInt(res, 10)) + ranges[i].suffix;
      }
    }
  }
  return number.toString();
}

.wrapper {
  position: fixed;
  top: 35%;
  left: 35%;
}

<div class="wrapper">
  <input type="number" id="num" placeholder="number">
  <br>
  <input type="number" id="rounded" placeholder="round">
  <div id="output"></div>
</div>
<script>
  var field = document.getElementById("num");
  var div = document.getElementById("output");

  field.onkeyup = function() {
    var num = document.getElementById("num").value;
    var rounded = document.getElementById("rounded").value;

    var output = INP(num, rounded);

    div.innerHTML = "Output: " + output;
  }
</script>

Answer 3

Answer №2

You are facing two issues.

Initially, using if (rounded == true) is not achieving the desired outcome. Since rounded is a string, comparing it to a boolean results in the boolean being converted to a string, leading to the string value of "1". Therefore, it is essentially the same as if (rounded == "1"). To rectify this, you can utilize parseInt() to transform the input into an integer, followed by using if (rounded).

Secondly, the issue was arising from not passing the actual value of rounded to INP, rather supplying true. Consequently, when utilized in toFixed(), it ended up converting to the integer 1, thus consistently rounding to one decimal place instead of basing it on the input value within rounded.

To eliminate any additional trailing zeroes from the result generated by toFixed, invoke parseFloat() on it to convert it back to a number.

var ranges = [
    { divider: 1000000000000000000000000000000000 , suffix: 'Dec' },
    { divider: 1000000000000000000000000000000 , suffix: 'Non' },
    { divider: 1000000000000000000000000000 , suffix: 'Oct' },
    { divider: 1000000000000000000000000 , suffix: 'Sep' },
    { divider: 1000000000000000000000 , suffix: 'Sex' },
    { divider: 1000000000000000000 , suffix: 'Quin' },
    { divider: 1000000000000000 , suffix: 'Quad' },
    { divider: 1000000000000 , suffix: 'T' },
    { divider: 1000000000 , suffix: 'B' },
    { divider: 1000000 , suffix: 'M' },
    { divider: 1000 , suffix: 'K' },
    { divider: 100 , suffix: 'H' }
];

function INP(number, round) {
  for (var i = 0; i < ranges.length; i++) {
    if (number >= ranges[i].divider) {
      if (round == null) {
        return (number / ranges[i].divider) + ranges[i].suffix;
      } else {
        return parseFloat((number / ranges[i].divider).toFixed(round)) + ranges[i].suffix;
      }
    }
  }
  return number.toString();
}

var field = document.getElementById("num");
var div = document.getElementById("output");

field.onkeyup = function() {
  var num = parseInt(document.getElementById("num").value, 10);
  var rounded = parseInt(document.getElementById("rounded").value, 10);

  if (rounded) {
    var output = INP(num, rounded);
  } else {
    var output = INP(num);
  }

  div.innerHTML = "Output: " + output;
}

.wrapper {
  position: fixed;
  top: 35%;
  left: 35%;
}

<div class="wrapper">
  <input type="number" id="num" placeholder="number">
  <br>
  <input type="number" id="rounded" placeholder="round">
  <div id="output"></div>
</div>

Answer 4

You are facing two issues.

Initially, using if (rounded == true) is not achieving the desired outcome. Since rounded is a string, comparing it to a boolean results in the boolean being converted to a string, leading to the string value of "1". Therefore, it is essentially the same as if (rounded == "1"). To rectify this, you can utilize parseInt() to transform the input into an integer, followed by using if (rounded).

Secondly, the issue was arising from not passing the actual value of rounded to INP, rather supplying true. Consequently, when utilized in toFixed(), it ended up converting to the integer 1, thus consistently rounding to one decimal place instead of basing it on the input value within rounded.

To eliminate any additional trailing zeroes from the result generated by toFixed, invoke parseFloat() on it to convert it back to a number.

var ranges = [
    { divider: 1000000000000000000000000000000000 , suffix: 'Dec' },
    { divider: 1000000000000000000000000000000 , suffix: 'Non' },
    { divider: 1000000000000000000000000000 , suffix: 'Oct' },
    { divider: 1000000000000000000000000 , suffix: 'Sep' },
    { divider: 1000000000000000000000 , suffix: 'Sex' },
    { divider: 1000000000000000000 , suffix: 'Quin' },
    { divider: 1000000000000000 , suffix: 'Quad' },
    { divider: 1000000000000 , suffix: 'T' },
    { divider: 1000000000 , suffix: 'B' },
    { divider: 1000000 , suffix: 'M' },
    { divider: 1000 , suffix: 'K' },
    { divider: 100 , suffix: 'H' }
];

function INP(number, round) {
  for (var i = 0; i < ranges.length; i++) {
    if (number >= ranges[i].divider) {
      if (round == null) {
        return (number / ranges[i].divider) + ranges[i].suffix;
      } else {
        return parseFloat((number / ranges[i].divider).toFixed(round)) + ranges[i].suffix;
      }
    }
  }
  return number.toString();
}

var field = document.getElementById("num");
var div = document.getElementById("output");

field.onkeyup = function() {
  var num = parseInt(document.getElementById("num").value, 10);
  var rounded = parseInt(document.getElementById("rounded").value, 10);

  if (rounded) {
    var output = INP(num, rounded);
  } else {
    var output = INP(num);
  }

  div.innerHTML = "Output: " + output;
}

.wrapper {
  position: fixed;
  top: 35%;
  left: 35%;
}

<div class="wrapper">
  <input type="number" id="num" placeholder="number">
  <br>
  <input type="number" id="rounded" placeholder="round">
  <div id="output"></div>
</div>

Answer 5

Answer №3

To determine the unit prefix, one can utilize logarithm of 10 for calculation. Make sure to adjust it accordingly.

var ranges = { 33: 'Dec', 30: 'Non', 27: 'Oct', 24: 'Sep', 21: 'Sex', 18: 'Quin', 15: 'Quad', 12: 'T', 9: 'B', 6: 'M', 3: 'K', 2: 'H' };

function INP(number, round) {
    var exp = Math.floor(Math.log(number) / Math.log(10));
    while (exp > 3 && !ranges[exp]) {
        exp--;
    }
    if (!ranges[exp]) {
        return number.toString();
    }
    return round === '' ?
        (number / Math.pow(10, exp)) + ranges[exp] :
        (number / Math.pow(10, exp)).toFixed(round) + ranges[exp];
}

.wrapper {
  position: fixed;
  top: 35%;
  left: 35%;
}

<div class="wrapper">
  <input type="number" id="num" placeholder="number">
  <br>
  <input type="number" id="rounded" placeholder="round">
  <div id="output"></div>
</div>
<script>
  var field = document.getElementById("num");
  var div = document.getElementById("output");

  field.onkeyup = function() {
    var num = document.getElementById("num").value;
    var rounded = document.getElementById("rounded").value;

    var output = INP(num, rounded);
    div.innerHTML = "Output: " + output;
  }
</script>

Answer 6

To determine the unit prefix, one can utilize logarithm of 10 for calculation. Make sure to adjust it accordingly.

var ranges = { 33: 'Dec', 30: 'Non', 27: 'Oct', 24: 'Sep', 21: 'Sex', 18: 'Quin', 15: 'Quad', 12: 'T', 9: 'B', 6: 'M', 3: 'K', 2: 'H' };

function INP(number, round) {
    var exp = Math.floor(Math.log(number) / Math.log(10));
    while (exp > 3 && !ranges[exp]) {
        exp--;
    }
    if (!ranges[exp]) {
        return number.toString();
    }
    return round === '' ?
        (number / Math.pow(10, exp)) + ranges[exp] :
        (number / Math.pow(10, exp)).toFixed(round) + ranges[exp];
}

.wrapper {
  position: fixed;
  top: 35%;
  left: 35%;
}

<div class="wrapper">
  <input type="number" id="num" placeholder="number">
  <br>
  <input type="number" id="rounded" placeholder="round">
  <div id="output"></div>
</div>
<script>
  var field = document.getElementById("num");
  var div = document.getElementById("output");

  field.onkeyup = function() {
    var num = document.getElementById("num").value;
    var rounded = document.getElementById("rounded").value;

    var output = INP(num, rounded);
    div.innerHTML = "Output: " + output;
  }
</script>

Trimming decimal points from large numbers using Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Sending the value of "username" between two components within Angular 2

Having trouble integrating Socket.io with Express.js?

Transmit HTML message using the "textarea" tag through email

The JavaScript-generated form element will not be included in the data submitted through the POST method

Updating a column in a SQL Table via an Ajax request

Updating the value of an HTML table cell when the data in local storage is changed using JavaScript

The automated test locator in Angular using Protractor is failing to function

Encountering both a CORS error and data in Angular 7

Avoiding redundant code in React Components: Best practices to keep your code DRY

Tips for merging two applications into a single file using Node.js

using JavaScript to strip away content following .jpg

Can an internal/private function call a public function?

Exploring the transformation of asynchronous callbacks to promises in Node.js

The information seems to not be getting transferred to the req.body variables from the HTML form

Having trouble loading an image after successfully connecting to an API with react.js

The animation in Rive feels sluggish when navigating to a page with animation in Blazor WASM, despite implementing dispose methods

Tips on deleting specific elements from an array by utilizing the splice method

Can someone assist me in retrieving the information stored within an object?

Using AJAX to update content based on selected value in a dropdown menu

Stop observing IntersectionObserver within the React.useEffect function