Solved

Help connecting to airtable api to make a basic console.log output

4 years ago
September 17, 2020
6 replies
5 views

Lewis_Sternberg
Known Participant
11 replies

Hey,

I have been reading carefully the airtable api documentation to work with my data.

I tried copying and pasting the suggested snippets of code from the official docs into visual studio project.
which is just an index.html boilerplate + an app.js reference in the same folder.

I understand that in order to follow the documentation I must install airtable via npm into my project folder. All done.

Now when I add the code to my project and save it, I get an error on the console:

“app.js:1 Uncaught ReferenceError: require is not defined
at app.js:1”

Then I thought, this must be something to do with the airtable npm module not being referenced. I then look for a fix here in the community and could not find any, so a threat in stack overflow advice to include:

import Airtable, { Base } from “airtable”;

Now after saving and loading my html boiler plate and checking the console it reads:

Uncaught SyntaxError: Cannot use import statement outside a module

Can someone show me, how to list airtable data via api to be read on my browser, and check the information in the console with a project hosted locally.

Very big disappointment (not with airtable) I thought that I knew a little programing, this experience however, makes me look like a moron.

The airtable documentation is very well structured and understandable, but putting it into practice didn’t went so well for me.

I am web designer, I have been learning javascript since the pandemia, I can resolve basic javascript
challenges, but clearly this isnt enough to get started for me with airtable api calls

I already read all the docs about airtable rules to access data via api, and I do understand the goddamn thing, but when I go to practice, I can’t even pass a basic console log test

Would also like your advise on what should I learn besides javascript to finally make airtable api work.

Node? webpack? servers? Help connecting to airtable api to make a basic console.log output Help connecting to airtable api to make a basic console.log output

Best answer by JonathanBowen

Hi @Lewis_Sternberg - here’s a very simple starter that will output data to the console:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./airtable.js"></script>
  </head>
  <body>
    <h1>Airtable</h1>

    <script>

    var Airtable = require('airtable');
    var base = new Airtable({apiKey: 'YOUR API KEY'}).base('YOUR BASE ID');

    base('People').select({
        maxRecords: 3,
        view: "All people"
    }).eachPage(function page(records, fetchNextPage) {
        records.forEach(function(record) {
            console.log('Retrieved', record.get('Name'));
        });
        fetchNextPage();
    }, function done(err) {
        if (err) { console.error(err); return; }
    });

    </script>
  </body>
</html>

This is just an HTML page with the Airtable JS file in the same directory - no node or npm. You can see in the <head> that I’ve referenced the JS file. Then in the body, within the script tags, I’ve just copied the list records code from the API documentation for this base.

View original

Did this topic help you find an answer to your question?

+18

JonathanBowen
Inspiring
1110 replies
Answer
4 years ago
September 17, 2020

Hi @Lewis_Sternberg - here’s a very simple starter that will output data to the console:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./airtable.js"></script>
  </head>
  <body>
    <h1>Airtable</h1>

    <script>

    var Airtable = require('airtable');
    var base = new Airtable({apiKey: 'YOUR API KEY'}).base('YOUR BASE ID');

    base('People').select({
        maxRecords: 3,
        view: "All people"
    }).eachPage(function page(records, fetchNextPage) {
        records.forEach(function(record) {
            console.log('Retrieved', record.get('Name'));
        });
        fetchNextPage();
    }, function done(err) {
        if (err) { console.error(err); return; }
    });

    </script>
  </body>
</html>

Lewis_Sternberg
Author
Known Participant
11 replies
4 years ago
September 18, 2020

JonathanBowen wrote:

Hi @Lewis_Sternberg - here’s a very simple starter that will output data to the console:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./airtable.js"></script>
  </head>
  <body>
    <h1>Airtable</h1>

    <script>

    var Airtable = require('airtable');
    var base = new Airtable({apiKey: 'YOUR API KEY'}).base('YOUR BASE ID');

    base('People').select({
        maxRecords: 3,
        view: "All people"
    }).eachPage(function page(records, fetchNextPage) {
        records.forEach(function(record) {
            console.log('Retrieved', record.get('Name'));
        });
        fetchNextPage();
    }, function done(err) {
        if (err) { console.error(err); return; }
    });

    </script>
  </body>
</html>

Thank you,

Can you point me a place to download the file airtable.js.
During my search I found some reference in github at https://github.com/airtable/airtable.js/

but there are hundreds of files and folders, and sadly I couldn’t find a file with the name airtable.js to download and place on my local folder. (every direction on github was dragging me into using npm installs )

Looking further I found a cdn link to airtable js thats goes:

(https://cdn.jsdelivr.net/npm/airtable@0.10.0/lib/airtable.min.js)

I put it into place, went again to airtable api docs for my base, copy and paste the code samples, making sure ‘api key’ option was marked.

Save and test, and there was nothing in the console, or actually 2 errors show :

Uncaught ReferenceError: require is not defined
at airtable.js:5

tests.html:13 Uncaught ReferenceError: require is not defined
at tests.html:13

Here is an image of the index.html local file that I am testing:

+18

JonathanBowen
Inspiring
1110 replies
4 years ago
September 18, 2020

Lewis_Sternberg wrote: