Retrieve JSON from RESTful API using fetch/XHRs

Use JS to fetch data from RESTful API server

We may need access to a large selection of data, and a raw database may be either too large to tag onto the source, or contain private information (email addresses, account numbers, etc.) we shouldn't expose. In this case, the best solution is retrieving data from a RESTful API server.

Provided a url pointing to the api endpoint, and an auth key, we can make calls to the API. We recieve a JSON payload, effectively providing a value for a sensitive key .

function ssGetJSON(address, successHandler, errorHandler){
var endpoint = 'https://api.server.com/records?emailaddress=' + address;
var authKey= "Basic randomlookingauthkey123456789==";
var xhr = new XMLHttpRequest();
xhr.open("GET", enpoint);
xhr.responseType = 'json';
xhr.onreadystatechange = function(){
var status;
var data;
if (xhr.readyState === 4){
status = xhr.status;
document.querySelector("#ssModal-inner").style.backgroundColor = "#e8ede6";
document.querySelector("#ssModal-inner").style.backgroundImage = "none";
if (status == 200){
data = xhr.response;
successHandler && successHandler(data);
} else{
errorHandler && errorHandler();
}
}
};
xhr.setRequestHeader("Authorization", authKey);
xhr.send();
}

function displayInfo(data){
var elem = document.getElementById("ssModal");
var amt = data[0].amount;
var date = "7/6/2020";
elem.innerHTML = '<h1 class="ssText1">The Amount is: '+amt+':</h1>';
}

ssGetJSON(jexample@sitespect.com, displayInfo, doSomethingElse);