An API is a way of interacting with data in a structured way. We’re going to use Airtable’s API to get data from Airtable asynchronously via JavaScript and insert the content into our webpages using the DOM manipulation techniques we discussed in week 8.
For this week’s assignment you can either use your bookshelf collection OR the collection you’ve swapped with your studio partner for the Elastic Collections project(or you can use your own collection). The base code to interact with the Airtable will be the same in either case. However, at some point you WILL need to copy your partner’s Airtable collection into your own Airtable account, and you should do that this week either way.
Here’s an overview of the steps we’ll be taking to get Airtable set up:
Create a sharing link to your Elastic Collection Airtable and post it in the grid at the bottom of this page so it’s easy for your partner to copy your table. Remember to make sure it’s publicly visible.
If you’d like to use the Elastic Collection table for this assignment, you’ll need to copy your partner’s table(see screenshot at the bottom of this document).
Add the Airtable JavaScript starter code to your document(see code below).
Confirm that initial starter code works by viewing your JavaScript console.
Use the data returned from the Airtable API to begin adding content to your page dynamically via JavaScript using the DOM manipulation techniques discussed in week 8.
Refer to Airtable’s interactive API documentation for examples of how to interact with your specific bases and to get your API key(you’ll need to enable it first via the account page https://airtable.com/account). Just select your base from that documentation page and the examples will use your data and the fields from your base.
Airtable JavaScript starter code
Download the starter code from this ZIP file to help get started interacting with Airtable’s API. The starter code shows you how to configure the Airtable JavaScript library with your API key and specify the base you want to query(you’ll either query your bookshelf or the Elastic Collection). Then, you can use the DOM manipulation techniques discussed last week to take the data from the API and insert it back into our webpage.
When using an API, the data we interact with is often returned in a format called JSON, and will often consist of a series of JavaScript objects. Please continue to read about both of these subjects below and elsewhere.
To find your API key, first go to your Airtable Account page and enable the API key https://airtable.com/account. Then, copy that key and add it to your configuration in the main.js file. Once you enable the API key you’ll be able to view it in the interactive documentation.
Additionally, you can refer to the Glitch demo by Justin Bakse showing off how to use the API. The code to accomplish this task will be slightly different, but overall both sets of code accomplish similar tasks. Refer to both styles of code to see the many different ways you can use code to do what you want!
Considerations
As you begin experimenting with the data returned from Airtable think about how you can use the API and the dynamic properties of JavaScript to do something interesting with the data. Is there a time-based element, or randomness you can incorporate?
Can you add interactions to your API calls to do something unique? For example, a user clicks a button and retrieves a random row from the Airtable data.
What interactions would make sense with your Elastic Collection? Are there columns that would make sense to add filters for? Can you order the data in different ways?
Airtable Elastic Collection roundup
Post the publicly viewable link to your Elastic Collection in the table below so that your partner can easily copy the table into their own account.
Here’s an overview of the steps we’ll be taking to get Airtable set up:
Airtable JavaScript starter code
Considerations
Airtable Elastic Collection roundup