New test Silver Simple AJAX call to load an HTML document

by Lucille Kenney

HTML

<div class="silver">
      <h1>AJAX JSON REQUEST</h1>

      <!--Simple AJAX call to load Qundl Inc API: https://www.quandl.com/resources/api-for-commodity-data-->

      <h3 class="latest-values-title">Latest Values</h3>

      <ul class="latest-values-list">
      
        <li class="latest-value-item">
          <span class="latest-value-label">Date</span><br>
          <span class="latest-value" id="date"></span>

        </li>
      
        <li class="latest-value-item">
          <span class="latest-value-label">USD</span><br>
          <span class="latest-value" id="usd"></span>
              
        </li>

        <li class="latest-value-item">
          <span class="latest-value-label">GBP</span>
          <br><span class="latest-value" id="gbp"></span>
        </li>
      
        <li class="latest-value-item">
          <span class="latest-value-label">EURO</span>
          <br><span class="latest-value" id="euro"></span>
        </li>
      </ul>

      <br>
    </div><!-- silver-->

<br>
<br>

<div id="putItHere">&nbsp;</div>

CSS

ul, ul.no-bullet {
  margin-left: 0;
}

.latest-values-list, 
.latest-values-title {
  padding-left: 20px;
  padding-right: 20px;
}

.latest-value-item {
  display: block;
  list-style: none;
  line-height: 14px;
  margin-bottom: 16px;
  width: 20%;
  float: left;
  border-bottom: 1px solid #d8e1e4;
  padding-bottom: 3px;
  margin-right: 3.33333333%;
}

.latest-value-label {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  color: #848484;
}
.latest-value {
  font-weight: 600;
  font-size: 14px;
}

JavaScript

//var el = document.getElementById("putItHere");

var day = document.getElementById("date");
var usd = document.getElementById("usd");
var gdp = document.getElementById("gbp");
var euro = document.getElementById("euro");

//  Create the XHR, intitalize the connection with open()) 
//  and send the request  ... https://www.quandl.com/resources/api-for-commodity-data
var xhr = new XMLHttpRequest();

//SILVER, https://www.quandl.com/data/LBMA/SILVER-Silver-Price-London-Fixing
xhr.open("GET", "https://www.quandl.com/api/v1/datasets/LBMA/SILVER.json?auth_token=dCkdMBF2jDN6_XfYnkZe&rows=1"); 

xhr.send();


//  Add a listener function to respond to the HTTP response
xhr.addEventListener("readystatechange", function(){
//  Check here for new state and HTTP response code
//   and write the response to the DIV
    if(this.readyState == 4 && this.status == 200){
         //el.innerHTML = this.response;   
         var o = JSON.parse(this.response);
         //alert(this.response);
            var d = o.data[0][0];
            var u = o.data[0][1];
            var g = o.data[0][2];
            var e = o.data[0][3];

            if (d) {
                $(date).html(d);
            }
            if (usd) {
                $(usd).html(u);
            }
            if (gbp) {
                $(gbp).html(g);
            }
            if (euro) {
                $(euro).html(e);
            }

//"column_names":["Date","USD","GBP","EURO"]
//"data":[["2015-04-30",16.52,10.7099,14.7579
    }
});