Extracting API Data

Question

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 text area.

I want to extract specific data points from the data. Specifically, I want to extract the data points: "Manufacturer" "ModelYear" "Make" "Model" "BodyClass" "DisplacementL" "EngineCylinders" "EngineHP".

I want to input this data into a table I made at the bottom of my page. So manufacturer data will be added to , model year to , and so on...

The VIN I have been using is: WBSBL93406PN63819

How can I extract the 8 specific data points I am after, and add them to the table?

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)
        {
            $("#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>

Thanks so much for your help!

So what is your specific problem/question? All you gave us was a goal and some code and no connection between them — charlietfl, Aug 08 '18 at 15:56
This post got flagged as a duplicate, but here's my answer anyhow. The correct type of request you are looking for is a GET. $.ajax({ url: "https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVINValuesBatch/WBSBL93406PN63819", type: "GET", dataType: "json", success: function(result) { $("#results").val(JSON.stringify(result)); }, error: function(xhr, ajaxOptions, thrownError) { console.log(xhr.status); console.log(thrownError); } }); — qgoehrig, Aug 08 '18 at 16:05

Cody Ｇ · Answer 1 · 2018-08-08T16:50:57.793

Follow something like

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

as I have shown below.

your results look something like

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

So you can access the "Results" part using results.Results, then it's an array so you need to use the index [0], and then to get the specific value you're looking for you need to use that key, e.g., "Manufacturer"

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

While this code may answer the question, providing additional context regarding _how_ and/or _why_ it solves the problem would improve the answer's long-term value. — Andreas, Aug 08 '18 at 15:57

Extracting API Data

1 Answers1