Fetching nested data from Airtable using Vue.js and Axios

Other Questions Airtable
1

Hey everyone, I’m having trouble getting nested data from Airtable using Vue.js and Axios. I’ve got a working setup for the main table, but I’m stuck when it comes to linked records.

My main table has a field called ‘ORGANIZZAZIONE’ that links to another table with more details like ‘NOME’ and ‘TIPOLOGIA’. I can’t figure out how to access this linked data.

Here’s a simplified version of what I’ve tried:

new Vue({
  el: '#app',
  data: {
    records: []
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const apiKey = 'your_api_key_here';
      const baseId = 'your_base_id_here';
      
      axios.get(`https://api.airtable.com/v0/${baseId}/MainTable`, {
        headers: { Authorization: `Bearer ${apiKey}` }
      })
      .then(response => {
        this.records = response.data.records;
      })
      .catch(error => console.log(error));
    }
  }
});

This works for the main table, but how do I get the linked ‘ORGANIZZAZIONE’ data? Do I need to use axios.all() somehow? Any help would be appreciated!

2

I’ve dealt with a similar issue when working with Airtable’s linked records. The key is to make separate API calls for the linked data. First, fetch your main table data as you’re doing now and then extract the IDs of the linked ‘ORGANIZZAZIONE’ records. With these IDs, make a second API call to the ‘ORGANIZZAZIONE’ table. Once both data sets are retrieved, merge them in your Vue instance. This method avoids making individual calls for each linked record, reducing API calls and improving performance. Be sure to handle rate limits and pagination if needed.

3

To fetch nested data from linked records in Airtable, you’ll need to make an additional API call. After retrieving your main table data, extract the IDs of the linked ‘ORGANIZZAZIONE’ records and then use these IDs to query the linked table. This approach involves fetching the main data, identifying the linked record IDs, and making a second API call to gather the associated details. Using Promise.all() can manage multiple API calls efficiently while ensuring that you handle pagination and Airtable’s rate limits appropriately.

4

yo, u can try using the ‘fields’ parameter in ur API request to include linked records. like this:

axios.get(https://api.airtable.com/v0/${baseId}/MainTable?fields[]=ORGANIZZAZIONE`, …)`

This shud fetch the linked data 2. if not, u might need to make a separate call for the ORGANIZZAZIONE table. hope this helps!