更改 API 数据输出的区分大小写

Question

我是 API 集成的新手。我最近将车辆 VIN 解码器 API 集成到我的应用程序中。 VIN 解码器来自 NHTSA（国家公路交通安全管理局）。用户输入车辆的 VIN 并选择提交后，有关该车辆的数据将显示在 table.

中

Make 数据始终以全大写显示。我想编辑此输出，以便每个单词的首字母仅大写。

例如：

当前输出如下：MERCEDES-BENZ、TOYOTA 或 NISSAN

我希望它显示为：Mercedes-Benz、Toyota 或 Nissan

有一个例外。宝马。我想让宝马全部大写。

知道如何在出现单个异常 (BMW) 的情况下更改数据的区分大小写吗？

这是我一直用于测试目的的 VIN。

梅赛德斯-奔驰 VIN：WDBFA76E7SF124980
丰田车牌号：JTEBU5JR3J5498475
日产车牌号：JN1AR5EG6EM110048
宝马车牌号：WBSBL93406PN63819

这是我的代码：

<!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>

Answer 1

过去，我创建了一个我想要转换的已知值的白名单查找（对象）。如果在查找中没有找到密钥，我会使用 lodash 或类似的东西来命名该值。

function formatManufacturer(manufacturer){
  const whitelist = {
    'BMW': 'BMW'
  }

  if(manufacturer in whitelist){
     return whitelist[manufacturer];
  } else {
     return titleCase(manufacturer) // defined elsewhere or in a library
  }
}

Answer 2

我会这样做：

var exclude = {'BMW':'BMW'};
function toTitleCase(str) {
  return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
}
function formatCarNames(carName){
 if(carName in exclude){
  return carName;
}else {
  return toTitleCase(carName);
}

Answer 3

在脚本中定义并使用此函数：

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;

}

然后 ajax 成功调用

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


    }

更改 API 数据输出的区分大小写

Changing the case-sensitivity of API data output

html

javascript

api

jquery

case-sensitive