Fetching and displaying Airtable data with JavaScript

Other Questions Airtable
1

Hey everyone, I’m stuck on a JavaScript project. I’m trying to grab 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 like they should.

Here’s what I’ve got so far:

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

    let questions = [];
    for (let i = 1; i <= 10; i++) {
      questions.push(document.querySelector(`#q${i}`));
    }

    const surveyId = 1;

    function fetchData() {
      fetch('https://api.airtable.com/v0/myBaseId/myTable', {
        method: 'GET',
        headers: {
          'Authorization': 'Bearer mySecretKey'
        }
      })
      .then(res => res.json())
      .then(data => {
        console.log(data);
        data.records.forEach(record => {
          if (surveyId === record.fields.survey) {
            for (let i = 1; i <= 10; i++) {
              questions[i-1] = record.fields[`Question${i}`];
            }
          }
        });
        displayQuestions();
      });
    }

    fetchData();

    function displayQuestions() {
      questions.forEach((q, index) => {
        let p = document.createElement('p');
        p.textContent = q;
        document.querySelector(`#q${index+1}`).appendChild(p);
      });
    }
  }
})();

Can anyone spot what I’m doing wrong? The console.log shows the data, but it’s not showing up on the page. Thanks!

2

I’ve run into similar issues before when working with Airtable and JavaScript. From what I can see, there might be a couple of things going on here.

First, make sure your Airtable base and table names are correct in the fetch URL. Sometimes a small typo can cause the whole thing to fail silently.

Second, I notice you’re using querySelector to grab elements with IDs like #q1, #q2, etc. Make sure these elements actually exist in your HTML before the script runs.

One thing that helped me was to add more detailed error handling. Try wrapping your fetch in a try-catch block and log any errors. Also, add a .catch() to your fetch promise chain to catch and log any network errors.

Lastly, double-check that your Airtable fields match exactly what you’re expecting. If the field names don’t match Question1, Question2, etc., your code won’t find them.

Hope this helps! Let me know if you need any more clarification.

3

I’ve encountered similar challenges with Airtable integration. One potential issue is that you’re assigning values directly to the DOM elements in your questions array, rather than their textContent. Try modifying your loop like this:

for (let i = 1; i <= 10; i++) {
  questions[i-1].textContent = record.fields[`Question${i}`];
}

Also, ensure your surveyId comparison uses strict equality (===) instead of assignment (=). Lastly, consider adding a check to verify if the required fields exist in the record before attempting to access them. This can prevent errors if some records are incomplete.

If issues persist, logging the specific record data inside your loop could provide more insight into what’s being received from Airtable.

4

hey mike, try checking ur airtable field names (q1, q2, etc) match your callouts, and confirm that #q1 & #q2 do exist in ur html. console.log inside the loop may help spot errors too. hope this helps!