Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ VIN Decoding API

Posted by: Chris619 Dec 2 2016, 05:24 PM

I'm trying to create an internal VIN Decoding website that pulls data from an external site. I'm a newbee so please dont tear me apart with negative comments smile.gif I have the link to the API, i have the API key but the results i get after entering VIN is in JSON format.

Link Example:

https://api.mywebsite.com/api/vehicle/vins/4T1BK1EB6DU056165?&fmt=json&api_key=mykey

First question is, how do I trigger the submit button to request decode of the vin entered in the text box, into the link example shown above. The only field that will change on the link will be the VIN which in this case is represented by 4T1BK1EB6DU056165.

CODE
<input id="id1" type="vin" max="17">
<button onclick="myFunction()">Submit</button>

And once I get the response in JSON, how do I display the code with styling in html? I tried the following code but no results

CODE
function setup() {
loadJSON("https://api.mywebsite.com/api/vehicle/vins/4T1BK1EB6DU056165?&fmt=json&api_key=mykey", gotData, 'jsonp);


Thanks any help you can give...

blink.gif

Posted by: pandy Dec 2 2016, 05:40 PM

Not as newbie as we (I'm shamelessly assuming the others are as ignorant as I). VIN? Vehicle Identification Number?

Posted by: CharlesEF Dec 2 2016, 05:44 PM

The link you posted doesn't work, I get a 'Server not found' message.

Posted by: pandy Dec 2 2016, 05:54 PM

It's a dummy link (check the domain name). The OP just wants to show the format.

Posted by: Chris619 Dec 2 2016, 05:59 PM

QUOTE(pandy @ Dec 2 2016, 05:40 PM) *

Not as newbie as we (I'm shamelessly assuming the others are as ignorant as I). VIN? Vehicle Identification Number?



Yes, vehicle identification number... Trying to do something like this http://www.vindecoderz.com/ but for internal use only

Posted by: Chris619 Dec 2 2016, 06:02 PM

QUOTE(CharlesEF @ Dec 2 2016, 05:44 PM) *

The link you posted doesn't work, I get a 'Server not found' message.



As pandy just said, its a dummy link and its only being shown to show the format of API link... our session API key will not be show as you could imagine... tongue.gif

Posted by: Chris619 Dec 2 2016, 06:04 PM

Let me just make it clear to everyone, all the code I've learned in two weeks have been learned from YOUTUBE tongue.gif

Posted by: pandy Dec 2 2016, 06:15 PM

Well, I have no experience with that. I don't even know how an American license plate looks. laugh.gif

But...

QUOTE(Chris619 @ Dec 2 2016, 11:24 PM) *

I have the link to the API, i have the API key but the results i get after entering VIN is in JSON format.


...could maybe have something to do with that you have fmt=jsoan in the query string?

CODE
https://api.mywebsite.com/api/vehicle/vins/4T1BK1EB6DU056165?&fmt=json&api_key=mykey
                                                              ^^^^^^^^


I guess this API comes with some documentation. What format do you want? Does the documentation tell you how to get it? Try that instead of specifying a format you don't want.


QUOTE

Let me just make it clear to everyone, all the code I've learned in two weeks have been learned from YOUTUBE tongue.gif


Yeah, I'm sure that will prove helpful. happy.gif

Posted by: CharlesEF Dec 2 2016, 06:26 PM

QUOTE(Chris619 @ Dec 2 2016, 05:02 PM) *

As pandy just said, its a dummy link and its only being shown to show the format of API link... our session API key will not be show as you could imagine... tongue.gif
Oh, sorry. I thought it was the link to the API.

Posted by: Chris619 Dec 5 2016, 05:49 PM

Alright peeps, here is my code that I'm using... can any one, for the love of Bob Marley show me how to make the "decode" button trigger the link to show the json result of the vin intered on "enter VIN" box ???

Here is an example:
I enter vin>i hit decode>a link is created with the "enter VIN" information, lets say I entered beer, BEER gets thrown into the link below
https://api.mywebsite.com/api/vehicle/vins/BEER?&fmt=json&api_key=mykey
>data is retreived with all beer information in json format

check out my fiddle code


https://jsfiddle.net/CHRIS619/kgeya1py/#&togetherjs=qV6twRdSO6

Posted by: CharlesEF Dec 5 2016, 08:50 PM

First, your HTML is invalid, I did fix some spelling/attribute errors. <center> and <font> are obsolete, you should use CSS instead. Use https://validator.w3.org/nu/ link to validate HTML5 pages.

According to your link sample the VIN is NOT passed as part of the query string. I followed your link example anyway.

CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Charles E. Finkenbiner - Creative Electronic Formulas, Inc.">
<meta name="generator" content="SynWrite 6.22.2280">
<title>VIN Example</title>
<script type="text/javascript">
function myFunction(vin)
{
if(vin != "")
{
  var url = "https://api.mywebsite.com/api/vehicle/vins/";
  url += vin + "?fmt=json&api_key=mykey";
  window.location.href = url;
}
}
</script>
</head>
<body>
<center>
<strong>
  <font size="+5">VIN Decoder</font>
</strong>
<br>
<font size="+3"></font>
<input type="text" id="vin" maxlength="17" placeholder="Enter Vin">
<button onclick="myFunction(document.getElementById('vin').value)">Decode</button>
</center>
</body>
</html>

If you learned HTML on YouTube then I suggest you find another source.

Posted by: Chris619 Dec 6 2016, 10:51 AM

CharlesEF, I thank you for this great help... Looks like I have alot learning to do... I have never tried to code a page, but know it has gain my interest. I was just reading that W3 schools is a good way to start... YouTube has training videos, but i do not know where to start...

again, thank you for the help... and just as a token of gratitude, this API connection i'm doing is completely free and can be obtained at developer.edmunds.com. Hopefully this info helps any coder with potential customer seeking the same solution with a no charge membership.

Posted by: CharlesEF Dec 6 2016, 07:25 PM

Well, you need to be careful with w3schools also. They have their own set of problems. I myself don't know of a good source for beginners.

Actually, the code I posted will most likely not work for you. I only showed you what you asked, how to build the link. The problem is what is going to happen with the data returned? If the data is returned in JSON format then you need to handle that data and display it in the web page. I think you need to make an AJAX request and handle the data that is returned.

Posted by: pandy Dec 6 2016, 09:34 PM

QUOTE(Chris619 @ Dec 6 2016, 04:51 PM) *

this API connection i'm doing is completely free and can be obtained at developer.edmunds.com.


Well thank you. There's extensive documentation. Seems you can choose between json and XML but the latter has limited support.

Note: All API calls support json as the default response format. XML support is limited and will be noted in the endpoint documentation if the response format also supports XML. For JSONP support, you will need to add callback= to the query string and set it to the Javascript function that you have defined to handle the json response
http://developer.edmunds.com/api-documentation/overview/index.html#sec-4

Posted by: Chris619 Dec 13 2016, 06:16 PM

QUOTE(CharlesEF @ Dec 5 2016, 08:50 PM) *

First, your HTML is invalid, I did fix some spelling/attribute errors. <center> and <font> are obsolete, you should use CSS instead. Use https://validator.w3.org/nu/ link to validate HTML5 pages.

According to your link sample the VIN is NOT passed as part of the query string. I followed your link example anyway.

CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Charles E. Finkenbiner - Creative Electronic Formulas, Inc.">
<meta name="generator" content="SynWrite 6.22.2280">
<title>VIN Example</title>
<script type="text/javascript">
function myFunction(vin)
{
if(vin != "")
{
  var url = "https://api.mywebsite.com/api/vehicle/vins/";
  url += vin + "?fmt=json&api_key=mykey";
  window.location.href = url;
}
}
</script>
</head>
<body>
<center>
<strong>
  <font size="+5">VIN Decoder</font>
</strong>
<br>
<font size="+3"></font>
<input type="text" id="vin" maxlength="17" placeholder="Enter Vin">
<button onclick="myFunction(document.getElementById('vin').value)">Decode</button>
</center>
</body>
</html>

If you learned HTML on YouTube then I suggest you find another source.


Charles,
If its not much to ask, how do I get the results to be displayed on this iframe box?
CODE
<br />
  <br />
  <center>
  Vehicle Information
  <br />
  <iframe height="300px" width="800px" src="about:blank" name="iframe_a"></iframe>


THis is the JSON data i get and I have no clue how to present this
{"make":{"id":200004491,"name":"Subaru","niceName":"subaru"},"model":{"id":"Subaru_Outback","name":"Outback","niceName":"outback"},"engine":{"id":"200738672","name":"2.5i","equipmentType":"ENGINE","availability":"STANDARD","compressionRatio":10.3,"cylinder":4,"size":2.5,"displacement":2498.0,"configuration":"flat","fuelType":"regular unleaded","horsepower":175,"torque":174,"totalValves":16,"type":"gas","code":"4HNAG2.5","compressorType":"NA","rpm":{"horsepower":5800,"torque":4000},"valve":{"timing":"variable valve timing","gear":"double overhead camshaft"}},"transmission":{"id":"200738674","name":"continuously variableA","equipmentType":"TRANSMISSION","availability":"STANDARD","automaticType":"Continuously variable","transmissionType":"AUTOMATIC","numberOfSpeeds":"continuously variable"},"drivenWheels":"all wheel drive","numOfDoors":"4","options":[{"category":"Interior","options":[{"id":"200738733","name":"All Weather Mats","equipmentType":"OPTION","availability":"All"},{"id":"200738761","name":"Power Outlet - 120V","equipmentType":"OPTION","availability":"All except Base"}]},{"category":"Exterior","options":[{"id":"200738749","name":"Bumper Cover Rear (Rear)","equipmentType":"OPTION","availability":"All"},{"id":"200738738","name":"Exterior Auto Dimming Mirror Kit W/Approach Lighting","equipmentType":"OPTION","availability":"Base/Premium/Limited 3.6R"}]}],"colors":[{"category":"Interior","options":[{"id":"200738692","name":"Slate Black Cloth","equipmentType":"COLOR","availability":"USED"}]},{"category":"Exterior","options":[{"id":"200738679","name":"Twilight Blue Metallic","equipmentType":"COLOR","availability":"USED"}]}],"manufacturerCode":"GDD","price":{"baseMSRP":27695.0,"baseInvoice":26076.0,"deliveryCharges":850.0,"usedTmvRetail":24546.0,"usedPrivateParty":23208.0,"usedTradeIn":21435.0,"estimateTmv":false},"categories":{"market":"Crossover","EPAClass":"Sport Utility Vehicles","vehicleSize":"Midsize","crossover":"Car","primaryBodyType":"SUV","vehicleStyle":"4dr SUV","vehicleType":"SUV"},"vin":"4S4BSAEC6G3280541","squishVin":"4S4BSAECG3","years":[{"id":200738662,"year":2016,"styles":[{"id":200738667,"name":"2.5i Premium PZEV 4dr SUV AWD (2.5L 4cyl CVT)","submodel":{"body":"SUV","modelName":"Outback SUV","niceName":"suv"},"trim":"2.5i Premium PZEV"}]}],"matchingType":"SQUISHVIN","MPG":{"highway":"33","city":"25"}}

Posted by: CharlesEF Dec 14 2016, 04:53 PM

I'm sure you need to use AJAX for this. The function 'myFunction(vin)' needs to be changed to use a AJAX request. There are many samples of using AJAX on the web. I can help you with the code but I can't run the code myself (I'm not registered and don't have a pass key). If you want to PM me the actual URL and your pass key then I can test the code.

Posted by: CharlesEF Dec 14 2016, 07:27 PM

You haven't posted any javascript code yet but I hope this gets you started. Be sure to change the XXX values.

CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Charles E. Finkenbiner - Creative Electronic Formulas, Inc.">
<meta name="generator" content="SynWrite 6.22.2280">
<title>VIN Example</title>
<script type="text/javascript">
function clearVin()
{
document.getElementById("vin").value = "";
document.getElementById("vin_result").innerHTML = "";
}

function decodeVin(result)
{
var vinArray = JSON.parse(result);
var results = "<h4>Make:</h4>";
results += "id: " + vinArray.make.id + "<br>";
results += "name: " + vinArray.make.name + "<br>";
results += "niceName: " + vinArray.make.niceName + "<br>";

document.getElementById("vin_result").innerHTML = results;
}

function submitVin(vin, callback)
{
if(vin != "")
{
  var url_prefix = "https://XXX/";
  var url_suffix = "?fmt=json&api_key=XXX";
  var ajax = null;
  if(window.XMLHttpRequest) // for IE7+, Firefox, Chrome, Opera, Safari
  {
   ajax = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) // for IE5 and IE6
  {
   ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else // a browser not equipped to handle XMLHttp
  {
   window.alert("ERROR: Cound not create XmlHttpRequest Object. Consider upgrading your browser.");
   return(false);
  }
  ajax.onreadystatechange = function()
  {
   if(ajax.readyState == 4 && ajax.status == 200)
   {
    callback(ajax.responseText);
   }
  }
  ajax.open("GET", url_prefix + vin + url_suffix, true);
  ajax.send();
}
}
</script>
</head>
<body>
<center>
<strong>
  <font size="+5">VIN Decoder</font>
</strong>
<br>
<font size="+3"></font>
<input type="text" id="vin" maxlength="17" placeholder="Enter Vin">
<button onclick="clearVin();">Clear</button>
<button onclick="submitVin(document.getElementById('vin').value.toUpperCase(), decodeVin);">Decode</button>
<br>
<div id="vin_result"></div>
</center>
</body>
</html>

You don't need an 'iframe' to display the results in, a 'div' will work fine. See http://www.w3schools.com/xml/ajax_intro.asp link for an overview of AJAX.

Posted by: CharlesEF Jan 6 2017, 02:17 PM

I don't know if you're going to come back but I will post this in hopes of helping someone else with this problem.

I rewrote the code so that a table is created using the JSON response data. A JSON response is nothing more than an array of key/value pairs. Sometimes the value is a string and sometimes the value is another object/array. A recursive function is used to handle all values that are objects/arrays.

Be sure to change the 'XXX' value to the edmonds URL, up to but not including the VIN.
Be sure to change the 'YYY' value to your actual 'api_key'.

CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Charles E. Finkenbiner - Creative Electronic Formulas, Inc.">
<meta name="generator" content="SynWrite 6.22.2280">
<title>VIN Example</title>
<style type="text/css">
html, body
{
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#mask
{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #706E6E;
}

#mask div
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  background-color: #E6E6E6;
  border: 1px solid #000000;
  padding: 10px;
  z-index: 1002;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#description
{
  font-size: 3em;
  margin: 0px;
  padding: 0px;
}

#title
{
  background-color: #E6E6E6;
  text-align: center;
}

.error
{
  color: #FF0000;
  text-align: center;
}

.hide
{
  display: none;
}

.main
{
  margin: auto;
  width: 50%;
}

.show
{
  display: block;
}

.heading, .title-value
{
  background-color: #E6E6E6;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
}

.title-value
{
  background-color: #FFFFFF;
  font-weight: normal;
}

.key
{
  font-weight: bold;
  text-transform: capitalize;
  text-align: right;
}
</style>
<script type="text/javascript">
var vinInfo = null;
var results = "";

function insertSpace(text)
{
if(isNaN(text))
{
  return(text.replace(/([a-z])([A-Z])/g, '$1 $2').trim());
}
else
{
  return(parseInt(text, 10) + 1);
}
}

function clearVin()
{
document.getElementById("vin").value = "";
document.getElementById("vin_result").className = "hide";
document.getElementById("vin_result").innerHTML = "";
}

function decodeVin(result)
{
vinInfo = JSON.parse(result);
results = "";
var table_head = '<table>';
table_head += ' <thead>';
table_head += '  <tr>';
table_head += '   <th id="title" colspan="3">VIN: ' + document.getElementById('vin').value.toUpperCase() + '</th>';
table_head += '  </tr>';
table_head += ' </thead>';
table_head += ' <tbody>';
for(var key in vinInfo)
{
  if(typeof(vinInfo[key]) === "object")
  {
   readInfo(key, key, vinInfo[key]);
  }
  else
  {
   results += '  <tr>';
   results += '   <td colspan="3" class="heading">' + insertSpace(key) + '</td>';
   results += '  </tr>';
   results += '  <tr>';
   results += '   <td colspan="3" class="title-value">' + vinInfo[key] + '</td>';
   results += '  </tr>';
  }
} // Closing brace for for(var key in vinInfo)
var table_tail = ' </tbody>';
table_tail += '</table>';
document.getElementById("vin_result").innerHTML = table_head + results + table_tail;
document.getElementById("vin_result").className = "show";
document.getElementById("mask").className = "hide";
}

function readInfo(key, pkey, array)
{
if(typeof(array) === "object")
{
  var temp = pkey != key ? pkey + " - " + insertSpace(key) : insertSpace(key);
  results += '  <tr>';
  results += '   <td colspan="3" class="heading">' + temp + '</td>';
  results += '  </tr>';
  for(var nkey in array)
  {
   readInfo(nkey, temp, array[nkey]);
  }
}
else
{
  results += '  <tr>';
  results += '   <td colspan="2" class="key">' + insertSpace(key) + ':</td>';
  results += '   <td>' + array + '</td>';
  results += '  </tr>';
}
}

function submitVin(vin, callback)
{
if(vin != "")
{
  document.getElementById("mask").className = "show";
  var url_prefix = "https://XXX";
  var url_suffix = "?fmt=json&api_key=YYY";
  var ajax = null;
  if(window.XMLHttpRequest) // for IE7+, Firefox, Chrome, Opera, Safari
  {
   ajax = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) // for IE5 and IE6
  {
   ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else // a browser not equipped to handle XMLHttp
  {
   window.alert("ERROR: Coud not create XmlHttpRequest Object. Consider upgrading your browser.");
   return(false);
  }
  ajax.onreadystatechange = function()
  {
   if(ajax.readyState == 4 && ajax.status == 200)
   {
    callback(ajax.responseText);
   }
  }
  ajax.open("GET", url_prefix + vin + url_suffix, true);
  ajax.send();
}
}
</script>
</head>
<body>
<noscript>
  <h3 class="error">Javascript is required, please enable!</h3>
</noscript>
<div id="mask" class="hide">
  <div id="page">
   <br>
   <h5 style="text-align: center; margin: 5px 0px 0px 0px;">Retrieving VIN Information</h5>
   <br>
  </div>
</div>
<div class="main">
  <h1 id="description">VIN Decoder</h1>
  <input type="text" id="vin" maxlength="17" placeholder="Enter VIN">
  <button onclick="clearVin();">Clear</button>
  <button onclick="submitVin(document.getElementById('vin').value.toUpperCase(), decodeVin);">Decode</button>
  <br><br>
  <div id="vin_result" class="hide"></div>
</div>
</body>
</html>

Posted by: Chris619 Jan 6 2017, 03:14 PM

I'm here to stay... biggrin.gif

Posted by: CharlesEF Jan 6 2017, 04:40 PM

QUOTE(Chris619 @ Jan 6 2017, 02:14 PM) *

I'm here to stay... biggrin.gif

Great, let me know how it works for you or if you have any questions about the code, just ask.

Posted by: Chris619 Jan 6 2017, 04:46 PM

Its great!, but for me its too much data fetched. This is an example of what I need and in the order that is known Year/Make/Model/Sub Model...etc...


CODE

function decodeVin(result)
{
var vinArray = JSON.parse(result);
var results = "<h4>Vehicle Information Result:</h4>";
results += "Year: " + vinArray.years[0].year + "<br>";
results += "Make: " + vinArray.make.name + "<br>";
results += "Model: " + vinArray.model.name + "<br>";
results += "Sub-Model: " + vinArray.years[0].styles[0].trim + "<br>";
results += "Platform: " + vinArray.categories.vehicleStyle + "<br>";
results += "DriveType: " + vinArray.drivenWheels + "<br>";
results += "Exterior Color: " + vinArray.colors[1].options[0].name + "<br>";



Something else that I will be working is adding a second API, you think its possible? This second API provides the Exterior Color code used by Automotive industry for paint replication/match..



Posted by: CharlesEF Jan 6 2017, 05:17 PM

Since you want things in a certain order then you should hard code the table in your HTML code. Then use javascript to set the values, something like this:

CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Charles E. Finkenbiner - Creative Electronic Formulas, Inc.">
<meta name="generator" content="SynWrite 6.22.2280">
<title>VIN Example</title>
<style type="text/css">
html, body
{
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#mask
{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #706E6E;
}

#mask div
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  background-color: #E6E6E6;
  border: 1px solid #000000;
  padding: 10px;
  z-index: 1002;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#title
{
  background-color: #E6E6E6;
  text-align: center;
}

.error
{
  color: #FF0000;
  text-align: center;
}

.hide
{
  display: none;
}

.show
{
  display: block;
}

.text
{
  font-weight: bold;
  text-align: right;
}

.sub_title
{
  background-color: #E6E6E6;
  font-weight: bold;
  text-align: center;
}
</style>
<script type="text/javascript">
function clearVin()
{
document.getElementById("vin").value = "";
document.getElementById("vin_result").className = "hide";
document.getElementById("title").innerHTML = "VIN:&nbsp;";
document.getElementById("make_id").innerHTML = "";
document.getElementById("make_name").innerHTML = "";
document.getElementById("make_niceName").innerHTML = "";
document.getElementById("model_id").innerHTML = "";
document.getElementById("model_name").innerHTML = "";
document.getElementById("model_niceName").innerHTML = "";
document.getElementById("engine_id").innerHTML = "";
document.getElementById("engine_name").innerHTML = "";
document.getElementById("engine_equipmentType").innerHTML = "";
document.getElementById("engine_availability").innerHTML = "";
document.getElementById("engine_compressionRatio").innerHTML = "";
document.getElementById("engine_cylinder").innerHTML = "";
document.getElementById("engine_size").innerHTML = "";
document.getElementById("engine_displacement").innerHTML = "";
document.getElementById("engine_configuration").innerHTML = "";
document.getElementById("engine_fuelType").innerHTML = "";
document.getElementById("engine_horsepower").innerHTML = "";
document.getElementById("engine_torque").innerHTML = "";
document.getElementById("engine_totalValves").innerHTML = "";
document.getElementById("engine_type").innerHTML = "";
document.getElementById("engine_code").innerHTML = "";
document.getElementById("engine_compressorType").innerHTML = "";
}

function decodeVin(result)
{
var vinArray = JSON.parse(result);
document.getElementById("title").innerHTML = "VIN:&nbsp;" + document.getElementById('vin').value.toUpperCase();
document.getElementById("make_id").innerHTML = vinArray.make.id;
document.getElementById("make_name").innerHTML = vinArray.make.name;
document.getElementById("make_niceName").innerHTML = vinArray.make.niceName;
document.getElementById("model_id").innerHTML = vinArray.model.id;
document.getElementById("model_name").innerHTML = vinArray.model.name;
document.getElementById("model_niceName").innerHTML = vinArray.model.niceName;
document.getElementById("engine_id").innerHTML = vinArray.engine.id;
document.getElementById("engine_name").innerHTML = vinArray.engine.name;
document.getElementById("engine_equipmentType").innerHTML = vinArray.engine.equipmentType;
document.getElementById("engine_availability").innerHTML = vinArray.engine.availability;
document.getElementById("engine_compressionRatio").innerHTML = vinArray.engine.compressionRatio;
document.getElementById("engine_cylinder").innerHTML = vinArray.engine.cylinder;
document.getElementById("engine_size").innerHTML = vinArray.engine.size;
document.getElementById("engine_displacement").innerHTML = vinArray.engine.displacement;
document.getElementById("engine_configuration").innerHTML = vinArray.engine.configuration;
document.getElementById("engine_fuelType").innerHTML = vinArray.engine.fuelType;
document.getElementById("engine_horsepower").innerHTML = vinArray.engine.horsepower;
document.getElementById("engine_torque").innerHTML = vinArray.engine.torque;
document.getElementById("engine_totalValves").innerHTML = vinArray.engine.totalValves;
document.getElementById("engine_type").innerHTML = vinArray.engine.type;
document.getElementById("engine_code").innerHTML = vinArray.engine.code;
document.getElementById("engine_compressorType").innerHTML = vinArray.engine.compressorType;

document.getElementById("vin_result").className = "show";
document.getElementById("mask").className = "hide";
}

function submitVin(vin, callback)
{
if(vin != "")
{
  document.getElementById("mask").className = "show";
  var url_prefix = "https:XXX";
  var url_suffix = "?fmt=json&api_key=YYY";
  var ajax = null;
  if(window.XMLHttpRequest) // for IE7+, Firefox, Chrome, Opera, Safari
  {
   ajax = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) // for IE5 and IE6
  {
   ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else // a browser not equipped to handle XMLHttp
  {
   window.alert("ERROR: Could not create XmlHttpRequest Object. Consider upgrading your browser.");
   return(false);
  }
  ajax.onreadystatechange = function()
  {
   if(ajax.readyState == 4 && ajax.status == 200)
   {
    callback(ajax.responseText);
   }
  }
  ajax.open("GET", url_prefix + vin + url_suffix, true);
  ajax.send();
}
}
</script>
</head>
<body>
<noscript>
  <h3 class="error">Javascript is required, please enable!</h3>
</noscript>
<div id="mask" class="hide">
  <div id="page">
   <br>
   <h5 id="display" style="text-align: center; margin: 5px 0px 0px 0px;">Retrieving VIN Information</h5>
   <br>
  </div>
</div>
<center>
  <strong>
   <font size="+5">VIN Decoder</font>
  </strong>
  <br>
  <font size="+3"></font>
  <input type="text" id="vin" maxlength="17" placeholder="Enter Vin">
  <button onclick="clearVin();">Clear</button>
  <button onclick="submitVin(document.getElementById('vin').value.toUpperCase(), decodeVin);">Decode</button>
  <br><br>
  <div id="vin_result" class="hide">
   <table>
    <thead>
     <tr>
      <th id="title" colspan="3">VIN:</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td colspan="3" class="sub_title">Make</td>
     </tr>
     <tr>
      <td colspan="2" class="text">Id:</td>
      <td id="make_id"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Name:</td>
      <td id="make_name"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">niceName:</td>
      <td id="make_niceName"></td>
     </tr>
     <tr>
      <td colspan="3" class="sub_title">Model</td>
     </tr>
     <tr>
      <td colspan="2" class="text">Id:</td>
      <td id="model_id"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Name:</td>
      <td id="model_name"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">niceName:</td>
      <td id="model_niceName"></td>
     </tr>

     <tr>
      <td colspan="3" class="sub_title">Engine</td>
     </tr>
     <tr>
      <td colspan="2" class="text">Id:</td>
      <td id="engine_id"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Name:</td>
      <td id="engine_name"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Equipment Type:</td>
      <td id="engine_equipmentType"></td>
     </tr>

     <tr>
      <td colspan="2" class="text">Availability:</td>
      <td id="engine_availability"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Compression Ratio:</td>
      <td id="engine_compressionRatio"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Cylinder:</td>
      <td id="engine_cylinder"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Size:</td>
      <td id="engine_size"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Displacement:</td>
      <td id="engine_displacement"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Configuration:</td>
      <td id="engine_configuration"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Fuel Type:</td>
      <td id="engine_fuelType"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Horsepower:</td>
      <td id="engine_horsepower"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Torque:</td>
      <td id="engine_torque"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Total Valves:</td>
      <td id="engine_totalValves"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Type:</td>
      <td id="engine_type"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Code:</td>
      <td id="engine_code"></td>
     </tr>
     <tr>
      <td colspan="2" class="text">Compressor Type:</td>
      <td id="engine_compressorType"></td>
     </tr>

    </tbody>
   </table>
  </div>
</center>
</body>
</html>

As for the 2nd API, I need more details but I'm sure it can be done.

Posted by: Chris619 Jan 19 2017, 05:57 PM

CHARLES, do you take contract work? we are currently looking to get multiple API's setup. As you might know, I'm not that knowledgeable, but my boss is willing to compensate... Let me know,

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)