Last active
April 1, 2021 12:04
-
-
Save leepettijohn/b1a61b803a87c119bd637e0be828ce33 to your computer and use it in GitHub Desktop.
Simple Airtable API pull to web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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(" "); | |
}); | |
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