Search code examples
javascriptjqueryhtmlapicase-sensitive

Changing the case-sensitivity of API data output

I am new to API integration. I recently integrated a vehicle VIN decoder API into my app. The VIN Decoder is from the NHTSA (National Highway Traffic Safety Administration). Once a user enters a vehicle's VIN and selects submit, data regarding that vehicle is presented in a table.

The Make data is always displayed in all-caps. I want to edit this output so that the first letter of each word is only capitalized.

For example:

The current outputs looks like this: MERCEDES-BENZ, TOYOTA, or NISSAN

I would want it to appear like this: Mercedes-Benz, Toyota, or Nissan

There is one exception. BMW. I want to keep BMW in all caps.

Any ideas how I could change the case sensitivity of the data while having a single exception (BMW)?

Here are the VIN's I have been using for test purposes.

  • Mercedes-Benz VIN: WDBFA76E7SF124980
  • Toyota VIN: JTEBU5JR3J5498475
  • Nissan VIN: JN1AR5EG6EM110048
  • BMW VIN: WBSBL93406PN63819

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}
</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);


        },
        error: function(xhr, ajaxOptions, thrownError)
        {
            console.log(xhr.status);
            console.log(thrownError);
        }
    });
  })
});

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

<script>

function hideHi() {
  document.getElementById("t1a").style.display = "none";
}
</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>

</body>
</html>

Solution

  • define in your script and use this function:

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

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

  if(str === 'bmw') {
    return str.toUpperCase();
  }

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

  return str;

}

    then in success of ajax call 

    success: function(result)
    {
        $("#t1").text(titleCase(result.Results[0].Manufacturer));
        $("#t2").text(titleCase(result.Results[0].ModelYear));
        $("#t3").text(titleCase(result.Results[0].Make));
        $("#t4").text(titleCase(result.Results[0].Model));
        $("#t5").text(titleCase(result.Results[0].BodyClass));
        $("#t6").text(titleCase(result.Results[0].DisplacementL));
        $("#t7").text(titleCase(result.Results[0].EngineCylinders));
        $("#t8").text(titleCase(result.Results[0].EngineHP));


    }