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>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)
})