VIN Decoding API |
VIN Decoding API |
Chris619 |
Dec 2 2016, 05:24 PM
Post
#1
|
Newbie Group: Members Posts: 10 Joined: 2-December 16 Member No.: 24,951 |
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 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/...p;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... This post has been edited by Chris619: Dec 2 2016, 05:27 PM |
pandy |
Dec 2 2016, 05:40 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Not as newbie as we (I'm shamelessly assuming the others are as ignorant as I). VIN? Vehicle Identification Number?
|
CharlesEF |
Dec 2 2016, 05:44 PM
Post
#3
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
The link you posted doesn't work, I get a 'Server not found' message.
|
pandy |
Dec 2 2016, 05:54 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
It's a dummy link (check the domain name). The OP just wants to show the format.
|
Chris619 |
Dec 2 2016, 05:59 PM
Post
#5
|
Newbie Group: Members Posts: 10 Joined: 2-December 16 Member No.: 24,951 |
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 |
Chris619 |
Dec 2 2016, 06:02 PM
Post
#6
|
Newbie Group: Members Posts: 10 Joined: 2-December 16 Member No.: 24,951 |
|
Chris619 |
Dec 2 2016, 06:04 PM
Post
#7
|
Newbie Group: Members Posts: 10 Joined: 2-December 16 Member No.: 24,951 |
Let me just make it clear to everyone, all the code I've learned in two weeks have been learned from YOUTUBE
|
pandy |
Dec 2 2016, 06:15 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Well, I have no experience with that. I don't even know how an American license plate looks.
But... 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 Yeah, I'm sure that will prove helpful. |
CharlesEF |
Dec 2 2016, 06:26 PM
Post
#9
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
|
Chris619 |
Dec 5 2016, 05:49 PM
Post
#10
|
Newbie Group: Members Posts: 10 Joined: 2-December 16 Member No.: 24,951 |
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/...p;api_key=mykey >data is retreived with all beer information in json format check out my fiddle code https://jsfiddle.net/CHRIS619/kgeya1py/#&am...erjs=qV6twRdSO6 |
CharlesEF |
Dec 5 2016, 08:50 PM
Post
#11
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
First, your HTML is invalid, I did fix some spelling/attribute errors. <center> and <font> are obsolete, you should use CSS instead. Use this 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. |
Chris619 |
Dec 6 2016, 10:51 AM
Post
#12
|
Newbie Group: Members Posts: 10 Joined: 2-December 16 Member No.: 24,951 |
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. |
CharlesEF |
Dec 6 2016, 07:25 PM
Post
#13
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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. |
pandy |
Dec 6 2016, 09:34 PM
Post
#14
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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-documenta...ndex.html#sec-4 |
Chris619 |
Dec 13 2016, 06:16 PM
Post
#15
|
Newbie Group: Members Posts: 10 Joined: 2-December 16 Member No.: 24,951 |
First, your HTML is invalid, I did fix some spelling/attribute errors. <center> and <font> are obsolete, you should use CSS instead. Use this 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"}} This post has been edited by Chris619: Dec 13 2016, 06:18 PM |
CharlesEF |
Dec 14 2016, 04:53 PM
Post
#16
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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.
|
CharlesEF |
Dec 14 2016, 07:27 PM
Post
#17
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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 this link for an overview of AJAX. This post has been edited by CharlesEF: Dec 14 2016, 07:34 PM |
CharlesEF |
Jan 6 2017, 02:17 PM
Post
#18
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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> |
Chris619 |
Jan 6 2017, 03:14 PM
Post
#19
|
Newbie Group: Members Posts: 10 Joined: 2-December 16 Member No.: 24,951 |
I'm here to stay...
|
CharlesEF |
Jan 6 2017, 04:40 PM
Post
#20
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
|
Lo-Fi Version | Time is now: 26th April 2024 - 08:59 AM |