I'm not that experienced when it comes to APIs so excuse me in advance.
I'm trying to get a button to display the contents (response) of an API, and the code below works wonders. I'm wondering how I would make the exact same request, but instead of the "explicit" endpoint, I want a "history" endpoint instead.
How would I do this?
const data = null;
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
var object1;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
object1 = JSON.parse(this.responseText);
}
document.getElementById('thejoke').innerHTML = object1.value;
});
xhr.open("GET", "https://api.chucknorris.io/jokes/random?category=explicit");
xhr.send(data);
The simplest answer would be to make it a function:
function send(category) {
const url = "https://api.chucknorris.io/jokes/random?category=" + category
const data = null;
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
var object1;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
object1 = JSON.parse(this.responseText);
}
document.getElementById('thejoke').innerHTML = object1.value;
});
xhr.open("GET", "");
xhr.send(data);
}
And then you can you call it like this:
send("explicit");
The only problem you then face is that object1 is not available outside of the function. You could work around this by making object1 a global variable, or do the things you want to directly in the EventListener.