Converting Airtable query results to JSON format in React application

Other Questions Airtable
1

I’m working on a React project and need help with processing Airtable data. I have a function that fetches records from my Airtable base, but I’m having trouble returning the data properly.

The function successfully retrieves all records and I can see them in the console, but when I try to return the array, it comes back empty. Here’s what I’m working with:

function fetchTableData(tableName) {
  var dataArray = []
  airtableBase(tableName).select().all()
  .then(
    function (recordSet) {
      for (let index = 0; index < recordSet.length; index++)
        dataArray.push(recordSet[index]._rawJson.fields)
      // console.log(dataArray) shows the data correctly
    });
  // return dataArray // this returns empty array
}

How can I properly return this data and convert it to JSON format? The async nature seems to be causing issues with the return statement.

2

Yeah, it’s definitely the promise timing. Function exits before Airtable finishes - happens all the time.

You don’t need to make the whole function async. Just return the promise directly and handle it where you call it:

function fetchTableData(tableName) {
  return airtableBase(tableName).select().all()
    .then(recordSet => {
      return recordSet.map(record => record._rawJson.fields);
    })
    .catch(error => {
      console.error('Airtable fetch failed:', error);
      return [];
    });
}

Then in your React component:

useEffect(() => {
  fetchTableData('YourTableName')
    .then(data => {
      setYourState(data);
    });
}, []);

Keeps the promise chain intact without async/await everywhere. I like this approach better for external APIs - makes the async stuff more obvious.

This video explains sync vs async really well:

Airtable fields are already JSON, so no extra parsing needed once you extract the data.

3

Yeah, you’re hitting a classic async issue. Your function returns the empty array before Airtable actually fetches the data. I ran into this exact thing when I started using Airtable with React. Here’s the fix - make your function async and await the promise:

async function fetchTableData(tableName) {
  try {
    const recordSet = await airtableBase(tableName).select().all();
    const dataArray = recordSet.map(record => record._rawJson.fields);
    return dataArray;
  } catch (error) {
    console.error('Error fetching data:', error);
    return [];
  }
}

When you call this function, you’ll need to use await or .then() since it returns a promise now. The data’s already JSON once you grab the fields, so no extra conversion needed. Using map() instead of a for loop keeps things cleaner too.

4

Had the exact same issue when I first added Airtable to my React app. Your return statement runs immediately, but the .then() callback happens later. The other answers work great, but here’s a callback approach if you don’t want to mess with promises in your component:

function fetchTableData(tableName, callback) {
  airtableBase(tableName).select().all()
    .then(recordSet => {
      const results = [];
      recordSet.forEach(record => {
        results.push(record._rawJson.fields);
      });
      callback(results);
    })
    .catch(err => callback([]));
}

Then call it like:

fetchTableData('MyTable', (data) => {
  setMyData(data);
});

I found this way easier to wrap my head around when starting out. Airtable fields are already JSON, so no extra conversion needed. Just handle the empty state in your component while data loads.