Handling nested data relationships in Vue.js with axios and Airtable API

Other Questions Airtable
1

I’m working on a Vue.js app that fetches data from an Airtable database using axios requests. My current setup works fine for getting basic information from the main table. However, I’m struggling with accessing linked records from related tables. In my database, I have a field called “COMPANY” that references another table containing company details like name and type. When I try to access this nested data, I get errors or undefined values. I think I need to make multiple API calls, maybe using axios.all, but I’m not sure how to structure this properly. Has anyone dealt with similar Airtable relationship issues?

new Vue({
  el: '#dashboard',
  data: {
    message: 'Hello from Vue',
    records: []
  },
  mounted() {
    this.fetchRecords();
  },
  methods: {
    fetchRecords() {
      const instance = this;
      const baseId = "appABC123XYZ456";
      const apiToken = "keyDEF789GHI012";
      
      axios.get(
        `https://api.airtable.com/v0/${baseId}/PROJECTS?api_key=${apiToken}`,
        { 
          headers: { Authorization: `Bearer ${apiToken}` }
        }
      ).then(response => {
        instance.records = response.data.records;
      }).catch(err => {
        console.error(err);
      });
    }
  }
});

<div id="dashboard">
  <h1>{{message}}</h1>
  <div v-for="record in records" :key="record.id">
    <h3>{{record.fields['PROJECT_NAME']}}</h3>
    <p>Start Date: {{record.fields['START_DATE']}}</p>
    <p>Company: {{record.fields['COMPANY']}}</p>
    <!-- This breaks when trying to access nested company data -->
    <p>Company Name: {{record.fields['COMPANY']['company_name']}}</p>
  </div>
</div>
2

You need to add the expand parameter to your axios request for linked records. Just add ?expand[]=COMPANY to your API endpoint URL - this tells Airtable to pull the actual company data instead of just record IDs. Right now you’re only getting the linked record references, not the company details. I hit this same issue last year building a project dashboard. Update your API call to: https://api.airtable.com/v0/${baseId}/PROJECTS?expand[]=COMPANY&api_key=${apiToken}. Then when you access record.fields['COMPANY'][0].fields['company_name'], you’ll actually get the company name instead of undefined. Just remember linked records return as arrays, so you need the index notation even for single relationships.

3

airtable’s expand syntax is tricky. try the newer format: ?expand%5B%5D=COMPANY (url encoded). also check your base permissions - linked records won’t show if your api key can’t read the related table. this broke silently on me once and i spent hours debugging it.

4

The expand parameter works, but here’s a nasty gotcha - pagination will break your linked records. Airtable caps responses at 100 records, so if your projects table is bigger, you’ll get inconsistent company data across pages. I spent hours debugging this before realizing some projects were missing company info just because they showed up on later pages. You’ve got to handle the offset parameter properly and expand on every paginated request. Fair warning though - expand kills your API performance, especially with multiple linked fields. I started caching company data in localStorage after the first fetch to avoid those expensive repeat calls. Also, your current axios setup won’t handle errors well. Add some user feedback for when the API goes down or hits rate limits.

5

I hit this exact problem a few months ago. Here’s another approach that works great depending on your data structure. Skip the expand parameter and fetch linked records separately, then merge them in your Vue component. You get way more control over data flow and it’s more efficient with large datasets. After your initial fetchRecords call works, grab all unique company IDs from your project records. Then make a second axios request to the COMPANIES table filtering by those specific record IDs using RECORD_ID(). Something like filterByFormula=OR(RECORD_ID()='rec123',RECORD_ID()='rec456'). In your Vue data, create a computed property that maps company IDs to company objects. You’ll avoid the messy nested array structure from expand and get cleaner template syntax. Sure, it’s two API calls instead of one, but the flexibility is totally worth it.

6

Been there with Airtable relationships. Your code’s trying to access nested data without checking the structure first.

When you use expand, the linked records come back in a weird format. Your COMPANY field becomes an array of objects, even for single links. You need record.fields['COMPANY'][0].fields['company_name'] instead.

I learned this building a client portal last year - always add safety checks. Airtable randomly returns empty arrays or missing fields.

Try this:

<div v-for="record in records" :key="record.id">
  <h3>{{record.fields['PROJECT_NAME']}}</h3>
  <p>Start Date: {{record.fields['START_DATE']}}</p>
  <p v-if="record.fields['COMPANY'] && record.fields['COMPANY'].length > 0">
    Company: {{record.fields['COMPANY'][0].fields['company_name']}}
  </p>
  <p v-else>No company assigned</p>
</div>

You’re passing the API key twice in your request. Pick either the URL parameter or Authorization header, not both. Header’s cleaner.

Expand works fine for simple cases, but if you’ve got multiple linked tables or complex relationships, RunningRiver’s separate API calls approach gives you more control.