<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/INDIRIZZO: </strong>{{ item['fields']['Organizzazione_Indirizzo'].join(', ') }}</p>
                               <!--{{ item['fields']['Kingdoms'].join(', ') }}!-->
                                <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>

/*body {
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 
  color: #333;
}

ul {
  list-style: none;
  margin-left: -2em;
}
li {
  width: 100%;
  max-width: 400px;
  height: 200px;
  overflow: hidden;
  dixplay: inline-block;
  float: left;
  padding: 0 1em 1em 1em;
  margin: 0 1em 1em 0;
  border: 2px solid #cccccc;
  border-radius: 8px;
  background-color: gray;
}

img {
  margin-bottom: 1em;
  max-width: 100px;
}
.description {
  margin-top: -1em;
  margin-bottom: -.5em;
  font-size: .875em;
}
.price {
  display: inline-block;
  float: left
}

.category {
  margin-top: -.125em;
  margin-left: 7em;
}
           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 = "keyVlcaKuzEw8QuXO"; 
                        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)
                        })
                    }
                }
            })
    
//THE SUGGESTED CODE DOES'T WORK

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.