JSON data not displaying in Vuetify v-data-table using Axios

Question

Can't get the JSON data to display. I'm receiving the data. Trying to take two of the fields from the JSON and put it in a v-data-table. In it's current form, the table generates and the correct # of rows appears for the # of records, but each row is blank.

An example of the JSON data:

"records": [{
    "id": "recFWwl9WYekKQhy5",
    "fields": {
        "Date": "2020-03-28T04:35:00.000Z",
        "Client": [
            "reciiW7xvFNJNb4yF"
        ],
        "Details": "Testing",
        "Town": "madfa"
    },
    "createdTime": "2020-03-25T04:35:16.000Z"
  }]
}

And the code:

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :items-per-page="5"
    class="elevation-1"
  >
    <template v-slot:item="props">
        <tr>
            <td>{{new Date(props.item.Date).toLocaleString()}}</td>
            <td>{{ props.item.Client }}</td>
            <td>{{ props.item.Details }}</td>
        </tr>
    </template>
  </v-data-table>
</template>

<script>
import axios from 'axios'
export default {
  components: {},
  computed: {},
  data() {
    return {
      headers: [
        {
          text: 'Date',
          align: 'start',
          sortable: true,
          value: 'Date',
        },
        { text: 'Client Name', value: 'Client' },
        { text: 'Details', value: 'Details' },
      ],
      items: []
    }
  },
  mounted() {
      this.loadItems(); 
  },
  methods: {
    loadItems() {

      // Init variables
      var self = this
      var app_id = "appID";
      var app_key = "key";
      this.items = []
      axios.get(
        "https://api.airtable.com/v0/"+app_id+"/openrideAppointments",
        { 
          headers: { Authorization: "Bearer "+app_key } 
        }
      ).then(function(response){
        self.items = response.data.records.map((item)=>{
          return {
              id: item.id,
              ...item.fields
          }
        })
      }).catch(function(error){
        console.log(error)
      })
    }
  }
}
</script>

Thank you very much. I'm now getting the date in a nice pretty format going into the appropriate Date column, however I'm still trying to figure out how to add the Client and Details values into their appropriate columns (or displaying at all).: — gcubed

Zim Zim · Accepted Answer · 2020-03-25T18:07:02

The Airtable API response has the values inside fields, so you should flatten the response...

 self.items = response.data.records.map((item)=>{
        return {
            id: item.id,
            ...item.fields
        }
 })

And make sure you're using the correct Vuetify 2.x slot template...

    <template v-slot:item="props">
        <tr>
            <td>{{ props.item.Date }}</td>
            <td>{{ props.item.Client }}</td>
            <td>{{ props.item.Details }}</td>
        </tr>
    </template>

Demo: https://codeply.com/p/gdv5OfRlOL

JSON data not displaying in Vuetify v-data-table using Axios

2 Answers