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

Lewis_Sternberg · ‎Sep 17, 2020

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

JonathanBowen · ‎Sep 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>

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.

See Solution in Thread

JonathanBowen · ‎Sep 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>

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.

Lewis_Sternberg · ‎Sep 18, 2020

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:

JonathanBowen · ‎Sep 18, 2020

Hi @Lewis_Sternberg - yes, within that repo you can find this file:

github.com

Airtable/airtable.js/blob/master/build/airtable.browser.js

require=(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
// istanbul ignore file
var AbortController;
if (typeof window === 'undefined') {
    AbortController = require('abort-controller');
}
else {
    if ('signal' in new Request('')) {
        AbortController = window.AbortController;
    }
    else {
        var polyfill = require('abortcontroller-polyfill/dist/cjs-ponyfill');
        AbortController = polyfill.AbortController;
    }
}
module.exports = AbortController;

},{"abort-controller":20,"abortcontroller-polyfill/dist/cjs-ponyfill":19}],2:[function(require,module,exports){
"use strict";

This file has been truncated. show original

Copy this down to your local environment and reference in the index file. This section of the README talks about using this:

Lewis_Sternberg · ‎Sep 18, 2020

Thank you,

After reading your help, here is what I have done:

I went to this link: https://raw.githubusercontent.com/Airtable/airtable.js/master/build/airtable.browser.js

Copied all its contents and place them on a file called airtable.js which is listed in the same folder as my index.html.

Testing didnt went so well again, here is the console response:

tests.html:39 TypeError: Failed to execute ‘fetch’ on ‘Window’: Illegal invocation
at Object.runAction [as default] (airtable.js:748)
at Base.runAction (airtable.js:134)
at inner (airtable.js:526)
at Query.eachPage (airtable.js:548)
at Query.eachPage (airtable.js:233)
at tests.html:24
done @ tests.html:39

source file:

JonathanBowen · ‎Sep 18, 2020

Sorry, my mistake - the airtable.browser.js file in the “test” directory is the one I have locally and this works:

github.com

Airtable/airtable.js/blob/master/test/test_files/airtable.browser.js

require=(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
'use strict';

function AirtableError(error, message, statusCode) {
    this.error = error;
    this.message = message;
    this.statusCode = statusCode;
}

AirtableError.prototype.toString = function() {
    return [
        this.message,
        '(',
        this.error,
        ')',
        this.statusCode ? '[Http code ' + this.statusCode + ']' : '',
    ].join('');
};

module.exports = AirtableError;

This file has been truncated. show original

The README say use the one in “build” which is the one I linked to, but this errors. This is a much newer file. Not sure why it doesn’t work, but go with the file in “test” for now as this seems to work OK.

Lewis_Sternberg · ‎Sep 18, 2020

My case have been solved. with your help I have managed to finally get records from airtable using a local html + js project.