The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
 Reply to this topicStart new topic
> VIN Decoding API
Chris619
post Jan 6 2017, 04:46 PM
Post #21


Newbie
*

Group: Members
Posts: 10
Joined: 2-December 16
Member No.: 24,951
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..
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 6 2017, 05:17 PM
Post #22


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Chris619
post Jan 19 2017, 05:57 PM
Post #23


Newbie
*

Group: Members
Posts: 10
Joined: 2-December 16
Member No.: 24,951
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,
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

2 Pages V < 1 2
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 07:30 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC