Button to create data | API

Dr,

It’s difficult to say what the underlying issue is. Could you expand on this by providing some additional details about the environment? Is this NodeJS? Also, can you provide a little more context as to where this code fragment exists in your app? Is this in the root of a tag? In a function?

Red Flag (sidebar)

var base = new Airtable({apiKey: ‘YOUR_API_KEY’}).base(‘appWtux0RgXKL8Ssv’);

A line like this in a web app will expose your API key to the entire web. With it anyone could foul or completely delete all your Airtable data. Worse, they could see all your Airtable data which may contain sensitive information. Ideally, your API key must be protected and @Chinara_James demonstrates this here.

Sorry.
I guess you can just view my project instead. That’d probably be easier.
https:_//glitch_.com/~hoggystyle
Please remove the _'s
What i’m working with here is: server.js views/index.html and public/client.js
I’m guessing it’d make most sense to make this button in client.js but if i do that, then i get Require isn't defined

This is only my base ID. API key is hidden very good away. And it contains no sensitive info and it never will.

And i forgot to say. The code i have in the box at top will be a function, executed by a button somehow. How, that’s what i need help with.

Right, okay. So, Is it possible you’re simply conflating two programming constructs - (i) code that is intended to run server-side (such as a NodeJS app) and code intended to run client-side (plain old javascript in a browser)?

I don’t think there’s anything wrong with the approach in your code shared above. Ideally, the client would kick off a post request to your server and the server would execute to create() method in the Airtable SDK. I think that’s kind’a what you are doing, eh?

Take a look at those two links to client and server Airtable SDKs.

The code above is just the code i need to run. How i actually try is like this:

function submitData(base, Airtable) {

event.preventDefault()
var Airtable = require(‘airtable’);
var base = new Airtable({apiKey: process.env.AIRTABLE_API_KEY}).base(process.env.AIRTABLE_BASE_ID);
var username = document.getElementById(“newUsername”).innerHTMl;
var attacksMissed = document.getElementById(“newAttacksMissed”).innerHTML;
var date = document.getElementById(“newDate”).innerHTML;
var totalStars = document.getElementById(“newTotalStars”).innerHTML;
var whichClan = document.getElementById(“newWhichClan”).innerHTML;

base(‘MissedAttacks’).create({
“Username”: username,
“AttacksMissed”: attacksMissed,
“Date”: date,
“Total Stars”: totalStars,
“Is Valid”: true,
“Which Clan”: whichClan
}, function(err, record) {
if (err) {
console.error(err);
return;
}
console.log(record.getId());
}); }

var username = document.getElementById(“newUsername”).innerHTMl;
var attacksMissed = document.getElementById(“newAttacksMissed”).innerHTML;
var date = document.getElementById(“newDate”).innerHTML;
var totalStars = document.getElementById(“newTotalStars”).innerHTML;
var whichClan = document.getElementById(“newWhichClan”).innerHTML;

These are input boxes on my page.

Okay, I believe this is a problem…

Loading the SDK (line 8) creates an object (i.e., Airtable) that should be statically declared (Const?) outside any functions that use it. I am assuming that you are sharing the server-side (NodeJS) code here.

As you have it, the Airtable parameter passed into your submitData() function is attempting to make is a dynamic variable, and the var (re-declaration) is likely throwing an error.

I’m not an expert in all the nuances of NodeJS or even the Airtable SDK as I tend to build custom equivalents of the SDK into my existing integration frameworks. But, I think if you move line 8 outside the function and drop the Airtable argument (from that function), it might work.

Hmm is it possible to just copy this code, and then replace the get with post? (And then of course fix the variables to the form instead.)

app.get("/data", function(_, response) {
if (cachedResponse && new Date() - cachedResponseDate < cacheTimeoutMs) {
response.send(cachedResponse);
} else {
// Select the first 10 records from the view.
base(tableName).select({
maxRecords: 21,
view: viewName,
}).firstPage(function(error, records) {
if (error) {
response.send({error: error});
} else {
cachedResponse = {
records: records.map(record => {
return {
name: record.get(‘Username’),
atkmissed: record.get(‘AttacksMissed’),
date: record.get(‘Date’),
totalstars: record.get(‘Total Stars’),
isvalid: record.get(‘Is Valid’),
whichclan: record.get(‘Which Clan’),

        };
      }),
    };
    cachedResponseDate = new Date();
    
    response.send(cachedResponse);
  }
});

}

Yes, that may work, however, you may also be getting into some weeds with cross-domain security depending on how you implement this. Is the client and server the same domain?

As I can see, your recent code share suggests this is NodeJS and server side.

Here’s a good practice to follow when building server-side code -

• Always start with the most reducible code framework. This is to suggest that you only build and test the minimal process - i.e., a GET that returns a static value, and a POST that hears and echos a dynamic value.
• Perform all tests from a reliable framework such as this or this.
• Always add API functionality slowly all while testing from tools that provide insight into the outcomes of each test.

Only after you have tested the server-side code and ready it for production, should you attempt to integrate from the client. Otherwise, you may be dealing with issues on either side and debugging unknowns from two perspectives is daunting.

I only just began working with databases yesterday, and i also recently began learning javascript. I’m very newbie, so i have to slowly learn all this :slightly_smiling_face:

Yep - I get that. I’m an accountant -> turned database guy -> turned software guy -> turned integration guy -> turned API designer -> turned solution architect -> turned real-time analytics dude -> turned AI hack. Still learning.

But this seems like an awfully complicated way to do this?

This code below is enough to create data and send it to my server.

var Airtable = require(‘airtable’);
var base = new Airtable({apiKey: process.env.API_KEY}).base(process.env.BASE.ID);

base(‘MissedAttacks’).create({
“Username”: “Jujubeez”,
“AttacksMissed”: “2”,
“Date”: “2008-01-18”,
“Total Stars”: “50 | 54”,
“Is Valid”: true,
“Which Clan”: “Main”
}, function(err, record) {
if (err) {
console.error(err);
return;
}
console.log(record.getId());
});

Isn’t there an easier way to just extract the values into that?

Hmm i think i found something. What if i turn the above into a function, and leave it on server-side, and then do this:
https_://stackoverflow._com/questions/43597543/how-to-call-server-side-function-from-html-button-not-in-a-form-using-expressj

Please remove the 2x _'s

Not really - you have a web app and totally separate, you have a server that is communicating with Airtable. If you want to create a client-server application there are some essential elements that need to work, and all in a way that doesn’t compromise security.

There is a pure client-side SDK for Airtable - I referenced it way above. Using it, you could go direct from the web app to Airtable (and back). This would negate the need to develop your own NodeJS server, but it would also require some additional considerations in the design of your app. It also creates cross-domain security issues that you’d need to program for.

I thought that’s what you were doing - the require() method suggests it is server-side already. Is it working as shown?