After researching a bit, it appears Airtable does not have any functions which could create a random number which would be needed to to select a random row of your table.
FYI - I wanted to make a suggestion of how to make your current solution more efficient and make it less likely for a site visitor to less likely to max out your airtable rate limit.
Instead of pulling the entire 75 quotes down everytime the TRAVEL button is clicked, why not download the quotes one time when the body loads and then have your travel function only select and display a random quote from data when someone clicks it.
This can be accomplished in a couple of ways, but one way is to create a new function named getData and execute it when the body loads. You will need to add onload=“getData()” in the opening body tag.
Next you copy the code of your existing travel function into a new function named getData, but remove all the code which has to do with selecting the random quote and displaying it. This means your getData function would look like:
var getData = function() {
// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest();
// Open a new connection, using the GET request on the URL endpoint
request.open(
"GET", "https://api.airtable.com/v0/appybL1OJaEEIvAdS/Books?api_key=keymAugpaEvXsyGBr", true
);
request.onload = function() {
data = JSON.parse(this.response);
};
// Send request
request.send();
};
and your travel function would simply become:
var travel = function() {
var choices = data.records.length;
var selection = Math.floor(Math.random() * choices);
var author = data.records[selection].fields.Author;
var title = data.records[selection].fields.Title;
var country = data.records[selection].fields.Country;
document.querySelector("h2").innerHTML = country;
document.querySelector("h1").innerHTML = title;
document.querySelector("h3").innerHTML = author;
};
There is on last important detail to make all of this work. You need to declare data as a global variable outside either of the functions. You will notice in the getData function above, instead of declaring var as a local function variable, I just assign it the parsed JSON data.
BONUS: Now that you download all the data when the page loads, you have the option of populating the page with a random quote when the page first loads instead of having those question marks display. I will let you figure out where you need to call the travel function to make this work.
