Question

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

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

例如：

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

我希望它看起来像这样：梅赛德斯·奔驰，丰田或日产

有一个例外。宝马。我想保留宝马的所有权利。

有什么想法可以改变具有单个异常（BMW）的数据的区分大小写吗？

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

奔驰VIN：WDBFA76E7SF124980
丰田VIN：JTEBU5JR3J5498475
日产VIN：JN1AR5EG6EM110048
宝马VIN：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

在脚本中定义并使用此功能：

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


    }

Answer 2

过去，我创建了一个白名单查找（对象），该白名单查找要转换的已知值。如果在查找中没有找到键，我将使用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 3

我会做这样的事情：

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

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

3 个答案: