typescript - Axios GET Request to JSON

Question

I'm trying to use axios to get data from my API and to display it on a datatable on vue.js.

Here is my code in TypeScript :

import Vue from "vue"
import axios from 'axios'
export default Vue.extend({
    name: 'Magasin_Tables',
    data: () => ({
      search: '',
      headers: [
        { text: 'Code CAR', value: 'code'},
        { text: 'Libellé CAR', value: 'name' },
        { text: 'CAC de rattachement', value: 'linkedCac.code' },
        { text: 'Code du CAC', value: 'linkedCac.name' },
      ],
      magasins : null,
    }),
    created(){
      axios.get('http://localhost:8090/api/cars')
        .then(response => this.magasins = JSON.parse(response.data))
    }
})

I already tried without the JSON.parse(), and with a beforeCreate() but my magasins variable doesn't exist.

Here is my JSON format:

[
  {
    "id": 2,
    "code": "W025",
    "name": "CAR BARCELONA",
    "linkedCac": {
      "id": 1,
      "code": "W075",
      "name": "CAC ZARAGOZA"
    }
  },
  {
    "id": 3,
    "code": "W002",
    "name": "CAR BOUC BEL AIR",
    "linkedCac": {
      "id": 1,
      "code": "W075",
      "name": "CAC ZARAGOZA"
    }
  },
  {
    "id": 4,
    "code": "W035",
    "name": "CAR GETAFE",
    "linkedCac": {
      "id": 1,
      "code": "W075",
      "name": "CAC ZARAGOZA"
    }
  },
  {
    "id": 5,
    "code": "W059",
    "name": "CAR CESTAS",
    "linkedCac": {
      "id": 1,
      "code": "W075",
      "name": "CAC ZARAGOZA"
    }
  },
  {
    "id": 7,
    "code": "W043",
    "name": "CAR BASIANO",
    "linkedCac": {
      "id": 6,
      "code": "W043B",
      "name": "CAC BASIANO"
    }
  },
  {
    "id": 8,
    "code": "W051",
    "name": "CAR BOLOGNA",
    "linkedCac": {
      "id": 6,
      "code": "W043B",
      "name": "CAC BASIANO"
    }
  }
]

Here is my code for the table :

<v-container fluid>
    <v-card
    style="margin-top: 2vh;">
      <v-row
      justify='space-between'
        ><v-card-title
        style="margin-left: 2vh;">
          Récapitulatif des magasins
        </v-card-title>
      <v-btn
      style="margin-right: 4vh; margin-top: 2vh;"
      color='primary'
      href='/magasins/import'>
        Importer des magasins
      </v-btn>
      </v-row>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
        style="margin: 2vh;"
      ></v-text-field>
      <v-data-table :headers="headers" :items="magasins" :search="search"></v-data-table>
    </v-card>
  </v-container>

Do someone have any idea how to change my TypeScript file to display data on my table?

question from:https://stackoverflow.com/questions/65951487/axios-get-request-to-json

Answer 1

So the problem appears to be due to the type conversion of magasins. You need to change the type of it which it is empty slice

data: () => ({
      search: '',
      headers: [
        {text: 'Code CAR', value: 'code'},
        { text: 'Libellé CAR', value: 'name' },
        { text: 'CAC de rattachement', value: 'linkedCac.code' },
        { text: 'Code du CAC', value: 'linkedCac.name' },
      ],
      magasins: [], // Change this from null
    }),

And ensure you do not use JSON.parse

created() {
    axios.get('http://localhost:8090/api/cars')
      .then(response => this.magasins = response.data)
}