Fetching data from Airtable using JavaScript not populating variables

Other Questions Airtable
1

Issue with Airtable API data retrieval

I’m trying to retrieve quiz questions from an Airtable database and display them on my webpage, but my variables don’t seem to be getting populated with the data from the API response.

The problem is that when I fetch the data from Airtable, the variables I’m trying to fill remain empty. I think there might be an issue with how I’m assigning the values or maybe with the scope of my variables.

Here’s the code I’m working with:

(function() {
    window.addEventListener('load', function() {
        
        document.getElementById('continue').addEventListener('click', function() {
            window.location.href = 'survey2.html';
        });
        
        let q1 = document.getElementById('question1');
        let q2 = document.getElementById('question2');
        let q3 = document.getElementById('question3');
        let q4 = document.getElementById('question4');
        let q5 = document.getElementById('question5');
        
        let surveyId = 1;
        
        let fetchQuestions = function() {
            fetch('https://api.airtable.com/v0/appXYZ123/Questions', {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer keyABC123'
                }
            })
            .then(response => response.json())
            .then(data => {
                console.log(data);
                
                for(let i = 0; i < data.records.length; i++) {
                    let record = data.records[i];
                    
                    if(surveyId === record.fields.survey_id) {
                        let q1_data = record.fields.Question1;
                        let q2_data = record.fields.Question2;
                        let q3_data = record.fields.Question3;
                        let q4_data = record.fields.Question4;
                        let q5_data = record.fields.Question5;
                        
                        q1 = q1_data;
                        q2 = q2_data;
                        q3 = q3_data;
                        q4 = q4_data;
                        q5 = q5_data;
                        
                        console.log(q1);
                    }
                }
            });
        };
        
        fetchQuestions();
        
        function displayQuestion() {
            let paragraph = document.createElement('p');
            paragraph.innerHTML = q1;
            document.getElementById('question1').appendChild(paragraph);
        }
        
        document.getElementById('question1').innerHTML = displayQuestion();
    });
})();

Can anyone help me figure out why my questions aren’t showing up on the page?

2

You’ve got a timing issue here. Your fetch is async, but you’re trying to use the data right after calling fetchQuestions().

I hit this same problem building a dashboard that pulled from multiple APIs. You need to handle everything inside your promise chain.

Here’s what’s happening: fetchQuestions() starts the API call and returns immediately, then displayQuestion() runs before the data arrives. Your q1 variable is still pointing to the DOM element.

Try this instead:

fetch('https://api.airtable.com/v0/appXYZ123/Questions', {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer keyABC123'
    }
})
.then(response => response.json())
.then(data => {
    for(let i = 0; i < data.records.length; i++) {
        let record = data.records[i];
        
        if(surveyId === record.fields.survey_id) {
            q1.textContent = record.fields.Question1;
            q2.textContent = record.fields.Question2;
            q3.textContent = record.fields.Question3;
            q4.textContent = record.fields.Question4;
            q5.textContent = record.fields.Question5;
            break; // no need to keep looping once you find your survey
        }
    }
});

This sets your DOM elements once the data actually arrives. Way cleaner and avoids the variable reassignment mess.

3

Your fetchQuestions() function is async, but you’re calling displayQuestion() right after without waiting for the response. When displayQuestion() runs, the fetch hasn’t finished yet - so your variables still have the original DOM references, not the actual question data. I’ve hit this exact timing issue with external APIs before. Move your display logic inside the .then() block after you get the data back. Also, your displayQuestion() function creates a paragraph element but returns undefined - that’s not helping. Either call your display functions from within the fetch promise chain, or use async/await to handle the timing properly. Samuel’s right about the variable reassignment too - you’re losing your DOM element references.

4

You’re overwriting your DOM element references with string values. When you do q1 = q1_data, you’re replacing the HTML element reference with the actual question text. This breaks the connection to your DOM elements. I hit this exact same issue building a quiz app last year. Use textContent or innerHTML to set the content instead of reassigning variables. Change q1 = q1_data to q1.textContent = q1_data. Your displayQuestion() function has problems too. It creates a paragraph but doesn’t return anything useful, then you’re trying to set innerHTML to undefined. Either populate the elements directly in your fetch callback or fix displayQuestion to actually return the created element.

5

Ah, classic async timing issue. Your fetch doesn’t block, so displayQuestion runs before the API call finishes. I made this exact mistake when I was learning promises. Also, displayQuestion creates a paragraph but returns undefined - then you’re trying to set innerHTML to that undefined value, which breaks everything. Just update your DOM elements directly in the .then block once the data comes back.