VIN Decoding API |
VIN Decoding API |
Chris619 |
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.. |
CharlesEF |
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: "; 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: " + 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. |
Chris619 |
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,
|
Lo-Fi Version | Time is now: 19th March 2024 - 07:04 AM |