How can I use Airtable as a backend?

[Elvan_Erkaya]

Hello everybody,

I am trying to use Airtable as backend for a submit form in my project. However, I cannot seem to integrate it and I don’t know the problem. I am using npm Airtable.js and axios.

I am very new to both JS and Airtable.

Below is my error code:

Error in the browser after submiting the form:

Airtable error: {“error”:{“type”:“INVALID_REQUEST_MISSING_FIELDS”,“message”:“Could not find field “fields” in the request body”}}

Could somebody please what I am doing wrong? Thanks a lot in advance!

Below is my code:

var form = document.querySelector("#bize-ulasin");
if(form) {

form.addEventListener("submit", function(event) {
    event.preventDefault();
axios.post(airtable_write_endpoint, 
    {
        "Content-Type": "application/json"
    } ,
    {
         "fields": {
            "AdSoyad": document.getElementById("#Ad-Soyad"),
            "Email": document.getElementById("#Email"),
            "Telefon": document.getElementById("#Telefon"),
            "Konu": document.getElementById("#Konu"),
            "Mesaj": document.getElementById("#Mesaj"),
            "Ortam": "Websitesi"
        }
    })
    .then(function(response) {
    console.log(response);
        })
        .catch(function(error) {
        console.log(error);
        })
    })
};

[IT_BeeTee]

Hi Elvan,

What does ‘airtable_write_endpoint’ look like? Have you added the authorization in your request header? With the given error, I suspect there is something wrong with the request thus Airtable could not parse the fetched fields. Sometimes it may be due to the type mismatch between the field and your given value (some fields in Airtable are arrays and not just strings etc.).

I suggest you to use https://codepen.io/airtable/ provided by Airtable to build proper request then test it on apps like Postman to see how it works. After that, you could build your code to generate the same request and things should be fine.

Regards,

Alex

[Giovanni_Briggs]

This looks like an error with how you are structuring your axios call. It looks like you are actually passing {"Content-Type": "application/json"} as the payload in your POST call instead of the second parameter. You should be able to fix by re-ordering the parameters in your call:

axios.post(airtable_write_endpoint, 
    {
         "fields": {
            "AdSoyad": document.getElementById("#Ad-Soyad"),
            "Email": document.getElementById("#Email"),
            "Telefon": document.getElementById("#Telefon"),
            "Konu": document.getElementById("#Konu"),
            "Mesaj": document.getElementById("#Mesaj"),
            "Ortam": "Websitesi"
        },
    }        
    {
        headers: { "Content-Type": "application/json"}
    })
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.log(error);
    })
})

Hope that helps!