Skip to content

Instantly share code, notes, and snippets.

@leepettijohn
Last active April 1, 2021 12:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leepettijohn/b1a61b803a87c119bd637e0be828ce33 to your computer and use it in GitHub Desktop.
Save leepettijohn/b1a61b803a87c119bd637e0be828ce33 to your computer and use it in GitHub Desktop.
Simple Airtable API pull to web page
<div id="results"></div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="/airtable.js"></script> // https://github.com/Airtable/airtable.js/blob/master/build/airtable.browser.js
<script>
// this allows you to pull variables from the URL - https://www.learningjquery.com/2012/06/get-url-parameters-using-jquery
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
}
return false;
};
jQuery(document).ready(function($) {
var myApiKey = ""; //get from https://airtable.com/account
var baseId = ""; //get from https://airtable.com/api and choose your base to get the BaseID
var tableName = ""; //Name of the table
var filterFieldName = ""; //Name of field to filter records from
var filterRecord = getUrlParameter(""); // insert URL variable
var fieldName = ""; //Name of field to get info to store
var viewName = ""; // Name of view to use
var namesArray = [];// namesarray will hold all the data from the API call
var Airtable = require("airtable");
console.log(filterFieldName);
var base = new Airtable({
apiKey: myApiKey
}).base(baseId);
base(tableName).select({
filterByFormula: '{'+filterFieldName+'} = "'+filterRecord+'"',
view: viewName
})
.eachPage(
function page(records, fetchNextPage) {
// This function (`page`) will get called for each page of records.
records.forEach(function(record) {
if (record.get(fieldName)) {
namesArray.push(record.get(fieldName));
} else namesArray.push("&nbsp;");
});
for (var i = 0; i < namesArray.length; i++) {
var p_text = document.createElement("p");
p_text.innerHTML = namesArray[i];
document.getElementById("results").appendChild(p_text);
}
},
function done(err) {
if (err) {
console.error(err);
return;
}
}
);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment