Question

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

我想从数据中提取特定的数据点。具体来说，我想提取数据点：“制造商”“ ModelYear”“制造”“模型”“ BodyClass”“ DisplacementL”“ EngineCylinders”“ EngineHP”。

我想将此数据输入到我在页面底部创建的表中。因此，制造商数据将添加到，模型年份将添加到，等等...

我一直在使用的VIN是：WBSBL93406PN63819

如何提取要提取的8个特定数据点并将其添加到表中？

这是我的代码：

<!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)
        {
            $("#results").val(JSON.stringify(result));
        },
        error: function(xhr, ajaxOptions, thrownError)
        {
            console.log(xhr.status);
            console.log(thrownError);
        }
    });
  })
});
</script>

</head>

<body>

  <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">Submit</button>
          </td>
      </tr>
      <tr>
          <td>
              <textarea rows="30" cols="120" id="results" placeholder="Vehicle Data Presented Here"></textarea>
          </td>
      </tr>
  </table>

  <table class="border" 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>

</body>
</html>

非常感谢您的帮助！

Answer 1

遵循类似

$("#t1").text(result.Results[0].Manufacturer);

如下所示。

您的结果看起来像

{
    "Count": 1,
    "Message": "Results returned successfully",
    "SearchCriteria": "",
    "Results": [{
            ...
            "Manufacturer": "",
            "ManufacturerId": "",
            "ManufacturerType": "",
            "Model": "",
            ...
        }
    ]
}

因此，您可以使用results.Results访问“ Results”部分，然后它是一个数组，因此您需要使用索引[0]，然后要获取所需的特定值，您需要使用该键，例如“制造商”

<!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)
        {
            $("#results").val(JSON.stringify(result));
            $("#t1").text(result.Results[0].Manufacturer);
        },
        error: function(xhr, ajaxOptions, thrownError)
        {
            console.log(xhr.status);
            console.log(thrownError);
        }
    });
  })
});
</script>

</head>

<body>

  <table align="center">
      <tr>
          <td align="center">
              <input type="text" id="b12" placeholder="Enter VIN" name="b12" maxlength="100" value="1FMEU74816ZA05940" />
          </td>
      </tr>
      <tr>
          <td align="center">
              <button id="submit_btn">Submit</button>
          </td>
      </tr>
      <tr>
          <td>
              <textarea rows="30" cols="120" id="results" placeholder="Vehicle Data Presented Here"></textarea>
          </td>
      </tr>
  </table>

  <table class="border" 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>

</body>
</html>

提取API数据

1 个答案: