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>

try this [answer](https://stackoverflow.com/questions/57944894/how-to-format-vuetify-data-table-date-column/57945017#57945017) if you're using vuetify v2 — Boussadjra Brahim, Mar 25 '20 at 18:06
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).: — majordomo, Mar 25 '20 at 18:32
you **should not** update your question with solution, try to keep the original question and post the solution as answer — Boussadjra Brahim, Mar 25 '20 at 18:51

Carol Skelly · Accepted Answer · 2020-03-25T18:37:48.080

3

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

edited Mar 25 '20 at 18:37

answered Mar 25 '20 at 18:07

Carol Skelly

351,302
90
710
624

Thank you, however, I added the fields and its still not working. – majordomo Mar 25 '20 at 18:17
this will not work since that vuetify v1.x syntax, however he's using v2 so he should do something like [this](https://stackoverflow.com/questions/57944894/how-to-format-vuetify-data-table-date-column/57945017#57945017) – Boussadjra Brahim Mar 25 '20 at 18:22
This works! Boussadjra's answer also works with date formatting (though I haven't yet figured it out completely). Thank you! – majordomo Mar 25 '20 at 18:37
You guys are both awesome - updated with final solution. – majordomo Mar 25 '20 at 18:42
@gcubed you **should not** update your question with solution, try to keep the original question and post the solution as answer – Boussadjra Brahim Mar 25 '20 at 18:44

Boussadjra Brahim · Answer 2 · 2020-03-26T11:57:43.390

1

Based on this answer which formats one column, but if you want to format multiple columns you should do something like :

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

edited Mar 26 '20 at 11:57

answered Mar 25 '20 at 18:47

Boussadjra Brahim

82,684
19
144
164

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

2 Answers2