CODEWITHSUNDEEP
jsonvue.jsgoogle-sheetsaxios
Anjo Bautista Liwanag
Anjo Bautista Liwanag

Reputation: 129

Fetching spreadsheet data as JSON with axios and Vue.js

I'm trying to fetch rows/data from google sheet as JSON.

<script>
const url =
  "https://spreadsheets.google.com/feeds/list/1NXF6G5npwcGeo2v_9tSDzieSHjxe4QtA-I9iPzHyvMk/1/public/values?alt=json";
const axios = require("axios").default;
export default {
  data: () => ({
    entries: [],
  }),
  mounted() {
    axios.get(url).then((response) => {
      this.entries = response.data;
    });
  },
};
</script>

The JSON tree(?) not sure what it's called. I'm really new to this. looks like

enter image description here

How do I call it on my vue app

<v-simple-table class="mt-5">
  <tbody>
    <tr v-for="column in entries" :key="column.EmployeeID">
      <td>{{ column.EmployeeID }}</td>
      <td>{{ column.EmployeeName }}</td>
      <td>{{ column.RaffleTickets }}</td>
      <td>{{ column.TotalPromoter }}</td>
      <td>{{ column.TotalAHTGoal }}</td>
    </tr>
  </tbody>
</v-simple-table>

Not sure how close I am from the my desired result.

Upvotes: 1

Views: 1380

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

According to the response data structure you should do :

 this.entries = response.data.feed.entry;

then in template :

  <tr v-for="column in entries" :key="column.gsx$employeeid.$t">
      <td>{{ column.gsx$employeeid.$t}}</td>
      <td>{{ column.gsx$employeename.$t}}</td>
      <td>{{ column.gsx$raffletickets.$t}}</td>
      <td>{{ column.gsx$totalpromoter.$t }}</td>
      <td>{{ column.gsx$totalahtgoal.$t }}</td>
    </tr>

Upvotes: 1

Related Questions