The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> VIN Decoding API
Chris619
post 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 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/...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...

blink.gif

This post has been edited by Chris619: Dec 2 2016, 05:27 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
CharlesEF
post Jan 6 2017, 02:17 PM
Post #2


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>
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Chris619
post Jan 6 2017, 03:14 PM
Post #3


Newbie
*

Group: Members
Posts: 10
Joined: 2-December 16
Member No.: 24,951
I'm here to stay... biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
Chris619   VIN Decoding API   Dec 2 2016, 05:24 PM
pandy   Not as newbie as we (I'm shamelessly assuming ...   Dec 2 2016, 05:40 PM
Chris619   Not as newbie as we (I'm shamelessly assuming...   Dec 2 2016, 05:59 PM
CharlesEF   The link you posted doesn't work, I get a ...   Dec 2 2016, 05:44 PM
pandy   It's a dummy link (check the domain name). The...   Dec 2 2016, 05:54 PM
Chris619   The link you posted doesn't work, I get a ...   Dec 2 2016, 06:02 PM
CharlesEF   As pandy just said, its a dummy link and its only...   Dec 2 2016, 06:26 PM
Chris619   Let me just make it clear to everyone, all the cod...   Dec 2 2016, 06:04 PM
pandy   Well, I have no experience with that. I don't ...   Dec 2 2016, 06:15 PM
Chris619   Alright peeps, here is my code that I'm using....   Dec 5 2016, 05:49 PM
CharlesEF   First, your HTML is invalid, I did fix some spelli...   Dec 5 2016, 08:50 PM
Chris619   First, your HTML is invalid, I did fix some spell...   Dec 13 2016, 06:16 PM
Chris619   CharlesEF, I thank you for this great help... Look...   Dec 6 2016, 10:51 AM
pandy   this API connection i'm doing is completely f...   Dec 6 2016, 09:34 PM
CharlesEF   Well, you need to be careful with w3schools also. ...   Dec 6 2016, 07:25 PM
CharlesEF   I'm sure you need to use AJAX for this. The f...   Dec 14 2016, 04:53 PM
CharlesEF   You haven't posted any javascript code yet but...   Dec 14 2016, 07:27 PM
CharlesEF   I don't know if you're going to come back ...   Jan 6 2017, 02:17 PM
Chris619   I'm here to stay... :D   Jan 6 2017, 03:14 PM
CharlesEF   I'm here to stay... :D Great, let me know h...   Jan 6 2017, 04:40 PM
Chris619   Its great!, but for me its too much data fetch...   Jan 6 2017, 04:46 PM
CharlesEF   Since you want things in a certain order then you ...   Jan 6 2017, 05:17 PM
Chris619   CHARLES, do you take contract work? we are current...   Jan 19 2017, 05:57 PM

« Next Oldest · Client-side Scripting · Next Newest »
 

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

 

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

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

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