Multiple axios requests with vue.js and Airtable

Question

I build a working code to retrieve data from fake Airtable database with axios. You can see the code below perfectly working. No problem to retrieve data when is on the main table. Yet as you can assume some fields are connected to other tables (named in Airtable: parent child data or fields). Is the case in my table when you have the field "ORGANIZZAZIONE" (Organization) that is connected to another table having the organization datails as for example: NOME (Name) and TIPOLOGIA (Activity). As you can see in the code when I try to access to this data (ORGANIZZAZIONE) I have bad results. Probably I have to build an "axios.all" request but I can't find the right way.

enter code here

           new Vue({
                el: '#app',
                data: {
                  saluti:'Saluti da Mauro',
                    items: []
                },
                mounted: function(){
                   this.loadItems(); 
                },
                methods: {
                    loadItems: function(){
                        
                        // Init variables
                        var self = this
                        var app_id = "apppCqmyJHPmfDTLr"; <!-- base -->
                        var app_key = "key8S2tx7NINXaZzZ";
                        this.items = []
axios.get(
  "https://api.airtable.com/v0/"+app_id+"/DASHBOARD?api_key="+app_key,
 
                            { 
                                headers: { Authorization: "Bearer "+app_key } 
                            }
                        ).then(function(response){
                            self.items = response.data.records
                        }).catch(function(error){
                            console.log(error)
                        })
                    }
                }
            })

  <head>
      <title>Airtable example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
      <h1>AIT</h1>
      <p>All work from <strong>Ryan Hayden</strong> | <a href="https://medium.com/row-and-table/an-basic-intro-to-the-airtable-api-9ef978bb0729">A basic introduction to the Airtable API</a>.</p>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 
 
      
<div id="app">
            <h2>{{saluti}}</h2>
  <div class="container-fluid">
     
        <div class="card-body" v-for="item, index in items" :key:="items">
          <img src="https://www.artemedialab.it/wp-content/uploads/2019/04/immagini-sfondo-1-700x400.jpg" class="card-img-top" class="img-fluid" alt="MM" style="width: 18rem;">
     
              <div class="card text-BLACK bg-primary mb-3 text-right" style="width: 18rem;">
                <div class="card-header">
                
                    <a href="#" class="btn btn-secondary" class="text-left">{{ index+1 }}</a>
                </div>
               
                
                            <div class="card text-black bg-success mb-3" style="max-width: 18rem;">
                             <div class="card border-primary mb-1" style="max-width: 18rem;">
     <!-- lavorare su questo per approfondire la struttura su JSON
this.posts = response.data.data.map((post) => {
        return {id: post.id, title: post.attributes.title, body: post.attributes.body};
      }) -->
 
                    <p class="price"><strong>DATA INIZIO: </strong>{{ item['fields']['DATA INIZIO'] }}</p>   
                     <p class="category"><strong>DETTAGLI ATTIVITA': </strong>{{ item['fields']["Attivita'"] }}</p>
                    <p class="category"><strong>PRIORITA': </strong>{{ item['fields']["PRIORITA'"] }}</p>
                               <p class="category"><strong>ORGANIZZAZIONE: </strong>{{ item['fields']['ORGANIZZAZIONE']}}</p>
                                <p class="category"><strong>ORGANIZZAZIONE / NOME: </strong>{{ item['fields']['ORGANIZZAZIONE']['Nome_Organizzazione']}}</p>
                               <p class="category"><strong>ORGANIZZAZIONE / TIPOLOGIA: </strong>{{ item['fields']['ORGANIZZAZIONE']['TIPOLOGIA']}}</p>
                    <img :src="item['fields']['Photo'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']" width="150">
        
    </div>
    </div>
   </div>
    
     
    </div>
      
    <!--app-->
        
        <!-- Include Dependancy Scripts -->
        <script type="text/javascript" src="https://unpkg.com/vue"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>

    </body>

score 0 · Answer 1 · answered May 30 '20 at 07:14

0

I got one blog regarding this issue. please check. https://www.storyblok.com/tp/how-to-send-multiple-requests-using-axios

answered May 30 '20 at 07:14

Nilesh Chavan

361
3
10

Hans Felix Ramos · Accepted Answer · 2020-05-30T16:00:03.053

In your case, you need to call the api for each ORGANIZZAZIONE on your response, then append it. Here is an example with the first ORGANIZZAZIONE:

var app_id = "apppCqmyJHPmfDTLr";
var app_key = "key8S2tx7NINXaZzZ";
this.items = []
axios.get(
  "https://api.airtable.com/v0/" + app_id + "/DASHBOARD?api_key=" + app_key, {
    headers: {
      Authorization: "Bearer " + app_key
    }
  }
).then(function(response) {
  // here get ORGANIZZAZIONE for each record
  for (let record of response.data.records) {
    // here the first ORGANIZZAZIONE on array
    let ORGANIZZAZIONE = record.fields.ORGANIZZAZIONE[0];

    //call Airtable api again
    axios.get(
      "https://api.airtable.com/v0/" + app_id + "/DASHBOARD/" + ORGANIZZAZIONE + "?api_key=" + app_key, {
        headers: {
          Authorization: "Bearer " + app_key
        }
      }
    ).then(function(response2) {
      // Replace  ORGANIZZAZIONE on first response to the the data in response2
      record.fields.ORGANIZZAZIONE = response2.data.fields;
      this.items = response.data.records; // You can set each time is getted

    }).catch(function(error) {
      console.log(error)
    })
  }
}).catch(function(error) {
  console.log(error)
})

codepen: https://codepen.io/hans-felix/pen/MWaNraL

Thanks Hanks I think this is the right way. But there are some problem at all. I refactor the codepen code with a new API Key (no problem is fake DB), but the problem persists. Here the code: https://codepen.io/mauro99/pen/XWmQzjv — PROGETTAZIONE STUDIO GB, May 30 '20 at 11:26
@PROGETTAZIONESTUDIOGB There is some warning on console I update my answer with a codepen, check it! — Hans Felix Ramos, May 30 '20 at 16:00

Multiple axios requests with vue.js and Airtable

2 Answers2