Rounding Numbers with JavaScript

Question

I implemented a vehicle VIN decoder API into my app. When a vehicle's VIN is entered into the input box and submit is selected, it returns basic data for that specific vehicle. Sometimes displacement is returned as a number with many decimal places. I would like to edit this, round this number to one decimal place.

If this VIN is entered: WAUUL78E38A092113 it returns this data:

Manufacturer: AUDI
Year: 2008
Make: AUDI
Model: S4
Body Style: Wagon
Displacement: 4.163000
Number of Cylinders: 8
Horsepower: 344

Displacement should read: 4.2 while it is displayed as 4.163000

How can I create a command that rounds all displacement figures to one decimal place?

This question is different to others in that I want every "#t6" value to be rounded, not just a single number. If a VIN is entered for a vehicle with a displacement of 3.67, that needs to be rounded to 3.7. If a VIN is entered for a vehicle with a displacement of 5.87, that needs to be rounded to 5.9. And so on...

My issue therefore lies in creating a function that rounds all displacements; thus, I need help creating a function that is tied to the "#t6" ID.

Here is my code:

<!DOCTYPE html>
<html>

<head>
<title>VIN Decoder API Test</title>

<style type="text/css">
input {width: 200px;}
.border {border:1px solid black}
textarea {display: block;margin-left:auto;margin-right: auto;}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function() {
  $("#submit_btn").click(function () {
    var val = $("#b12").val();

    $.ajax({
        url: "https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVINValuesBatch/",
        type: "POST",
        data: { format: "json", data: val},
        dataType: "json",
        success: function(result)
        {
            $("#t1").text(result.Results[0].Manufacturer);
            $("#t2").text(result.Results[0].ModelYear);
            $("#t3").text(result.Results[0].Make);
            $("#t4").text(result.Results[0].Model);
            $("#t5").text(result.Results[0].BodyClass);
            $("#t6").text(result.Results[0].DisplacementL);
            $("#t7").text(result.Results[0].EngineCylinders);
            $("#t8").text(result.Results[0].EngineHP);

            const input1 = (result.Results[0].ModelYear);
            const input2 = (titleCase(result.Results[0].Make));
            const input3 = (result.Results[0].Model);
            const input5 = (result.Results[0].EngineCylinders);
            const input6 = (result.Results[0].EngineHP);
            const input7 = (result.Results[0].DisplacementL);

            document.getElementById("t2a").value =
                "Up for sale is a "+input1+" "+input2+" "+input3+". The "+input3+" produces "+input6+" horsepower from a "+input7+" liter "+input5+" cylinder engine."
        },
        error: function(xhr, ajaxOptions, thrownError)
        {
            console.log(xhr.status);
            console.log(thrownError);
        }
    });
  })
});

function titleCase(str, spliters = [' ']) {

  str = (str || '').toString().toLowerCase();

  if(str === 'bmw') {
    return str.toUpperCase();
  }
  if(str === 'ram') {
    return str.toUpperCase();
  }
  if (str === 'mercedes-benz'){
    return "Mercedes-Benz";
  }


  spliters.forEach(spliter => {
    str = str.split(spliter).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
  });

  return str;

}

function hideHi() {
  document.getElementById("t1a").style.display = "none";
  document.getElementById("t2a").style.display = "none";
}

function showResults(){
  document.getElementById("t1a").style.display = "block";
  document.getElementById("t2a").style.display = "block";
}
</script>

</head>

<body onload="hideHi()">

  <table align="center">
      <tr>
          <td align="center">
              <input type="text" id="b12" placeholder="Enter VIN" name="b12" maxlength="100"/>
          </td>
      </tr>
      <tr>
          <td align="center">
              <button id="submit_btn" onclick="showResults()">Submit</button>
          </td>
      </tr>
  </table>
  <br>
  <br>
  <div id="t1a">
  <table align="center">
    <tr>
      <td>Manufacturer:</td> <!--"Manufacturer"-->
      <td id="t1"></td>
    </tr>
    <tr>
      <td>Year:</td> <!--"ModelYear"-->
      <td id="t2"></td>
    </tr>
    <tr>
      <td>Make:</td> <!--"Make"-->
      <td id="t3"></td>
    </tr>
    <tr>
      <td>Model:</td> <!--"Model"-->
      <td id="t4"></td>
    </tr>
    <tr>
      <td>Body Style:</td> <!--"BodyClass"-->
      <td id="t5"></td>
    </tr>
    <tr>
      <td>Displacement:</td> <!--"DisplacementL"-->
      <td id="t6"></td>
    </tr>
    <tr>
      <td>Number of Cylinders:</td> <!--"EngineCylinders"-->
      <td id="t7"></td>
    </tr>
    <tr>
      <td>Horsepower:</td> <!--"EngineHP"-->
      <td id="t8"></td>
    </tr>
  </table>
</div>

<br>
<textarea id="t2a" rows="15" cols="100"></textarea>

</body>
</html>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Number/toPrecision — Daniel Beck, Aug 09 '18 at 19:47

score 2 · Answer 1 · edited Aug 09 '18 at 19:55

2

you can use Math.round for this:

Math.round(4.163000 * 10) / 10

edited Aug 09 '18 at 19:55

saketk21

435
4
13

answered Aug 09 '18 at 19:51

samnu pel

914
5
12

OP, I suggest you wrap this in another function so the magic number 10 can be parameterized and "normalized". - e.g. be able to pass 2 instead of 100 for 2 places of precision. – radarbob Aug 09 '18 at 20:11
cont ... Oh, wait! See "The question already has an answer here:", above. The selected answer has a nice function doing just that. – radarbob Aug 09 '18 at 20:17
Looking for something that rounds any "#t6" value one decimal place. The 4.163 was just an example I provided. – Phil Motto Aug 09 '18 at 21:13

Madhan Varadhodiyil · Answer 2 · 2018-08-09T21:23:19.990

1

You can use toFixed() method in Number Object

 


function roundNum(num,precision) {
    return Number.parseFloat(num).toFixed(precision);
}
console.log(roundNum(14.163000,1));

Apparently ,

toPrecision() returns a number formatted to a specified length.

toFixed() returns n length after the decimal point .

Thanks @radarbob

edited Aug 09 '18 at 21:23

answered Aug 09 '18 at 19:52

Madhan Varadhodiyil

2,086
1
14
20

Hmmm, I'd read about `toFixed()` in MDN carefully. First, `toPrecision` & `toFixed` round, the same way. BUT `toFix` parameter is "the number of digits after the decimal point" and `toPrecision` parameter is "the number of significant digits." So 32.163 `toPrecision(2)` is 32 and `toFixed(2)` is 32.2 – radarbob Aug 09 '18 at 20:04
Yep. You're right. – Madhan Varadhodiyil Aug 09 '18 at 20:11
@Madhan Varadhoiyil I was looking more for something that rounded all "#t6" values to the first decimal. The 4.163 was just an example. – Phil Motto Aug 09 '18 at 21:11
@PhilMotto . You can define a function which takes a parameter and return this value – Madhan Varadhodiyil Aug 09 '18 at 21:15

Rounding Numbers with JavaScript

2 Answers2