Несколько запросов ax ios с vue. js и Airtable - PullRequest
Новая
       99

Несколько запросов ax ios с vue. js и Airtable

1 голос
/ 30 мая 2020

Я создаю рабочий код для извлечения данных из поддельной базы данных Airtable с помощью ax ios. Вы можете видеть, что приведенный ниже код отлично работает. Нет проблем получить данные, когда они находятся в основной таблице. Тем не менее, как вы можете предположить, некоторые поля связаны с другими таблицами (названными в Airtable: родительские дочерние данные или поля). Это случай в моей таблице, когда у вас есть поле «ORGANIZZAZIONE» (Организация), которое подключено к другой таблице, имеющей данные организации, например: NOME (Имя) и TIPOLOGIA (Деятельность). Как видно из кода, когда я пытаюсь получить доступ к этим данным (ORGANIZZAZIONE), у меня плохие результаты. Возможно, мне нужно создать запрос «ax ios .all», но я не могу найти правильный путь. 

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>

Ответы [ 2 ]

0 голосов
/ 30 мая 2020

В вашем случае вам нужно вызвать api для каждого ORGANIZZAZIONE в вашем ответе, а затем добавить его. Вот пример с первым кодом 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)
})

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

0 голосов
/ 30 мая 2020

У меня есть один блог по этой проблеме. пожалуйста, проверьте. https://www.storyblok.com/tp/how-to-send-multiple-requests-using-axios

...