Fetching and displaying Airtable data with JavaScript

Other Questions Airtable
1

Hey folks, I’m stuck on a JavaScript project. I’m trying to fetch questions from Airtable and show them on my webpage. I’ve set up a fetch request with the GET method, but I think something’s off. My variables aren’t getting filled with the questions from Airtable.

Here’s what I’ve done so far:

(function() {
  window.onload = function() {
    document.getElementById('continue').onclick = () => {
      window.location.href = 'questionnaire2.html';
    }

    const questionElements = Array.from({length: 10}, (_, i) => 
      document.getElementById(`q${i + 1}`)
    );

    const surveyId = 1;

    function fetchQuestions() {
      fetch('https://api.airtable.com/v0/myBaseId/MyTable', {
        method: 'GET',
        headers: {
          'Authorization': 'Bearer mySecretKey'
        }
      })
      .then(res => res.json())
      .then(data => {
        console.log(data);
        const survey = data.records.find(r => r.fields.surveyId === surveyId);
        if (survey) {
          questionElements.forEach((el, i) => {
            el.textContent = survey.fields[`Question${i + 1}`];
          });
        }
      });
    }

    fetchQuestions();
  }
})();

Can anyone spot what I’m doing wrong? The questions aren’t showing up on the page.

2

hey mate, have u checked if ur airtable fields match exactly? Sometimes i forget caps n stuff. Also, try console.logging each step to see where it breaks. Like log the data right after fetch, then after the .find(). Might help ya pinpoint the issue. good luck!

3

I’ve encountered similar issues when working with Airtable’s API. One thing that stands out is the structure of your data retrieval. Instead of searching for a specific survey ID, you might want to filter the records on the Airtable side. Try modifying your fetch URL to include a filter parameter:

fetch(`https://api.airtable.com/v0/myBaseId/MyTable?filterByFormula={surveyId}=${surveyId}`, {
  // ... rest of your fetch code
})

This approach is more efficient as it reduces the amount of data transferred and processed client-side. Also, ensure you’re handling the case where no matching survey is found. You could add a simple check:

if (data.records.length === 0) {
  console.error('No matching survey found');
  return;
}

These adjustments should help streamline your data retrieval process and make debugging easier if issues persist.

4

I’ve dealt with similar Airtable integration issues before, and there are a few things you might want to check:

First, ensure your Airtable base ID and API key are correct. It’s easy to mix these up, especially if you’re working with multiple bases.

Second, double-check the table name in your API URL. Airtable can be case-sensitive, so ‘MyTable’ might need to be ‘My Table’ or whatever your exact table name is.

Also, the way you’re finding the survey by ID might be causing issues. Airtable often returns IDs as strings, so try changing your comparison to:

const survey = data.records.find(r => r.fields.surveyId === surveyId.toString());

Lastly, add some error handling to your fetch call. This can help you pinpoint where things are going wrong:

.catch(error => console.error('Error:', error));

If none of these solve the problem, try logging the ‘data’ object at different stages to see exactly what you’re getting back from Airtable. This can often reveal unexpected data structures that need to be handled differently.