Fetching spreadsheet data as JSON with axios and Vue.js

Question

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

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.

I'm trying to do the same thing, but I'm getting the following error: "Access to XMLHttpRequest at 'accounts.google.com/…{ID}/1/public/values?alt%3Djson&followup=spreadsheets.google.com/feeds/list{ID}/1/public/values?alt%3Djson&ltmpl=sheets' (redirected from 'spreadsheets.google.com/feeds/list{ID}/1/public/values?alt=json') from origin 'localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ideas? — Vario
– Vario, Commented Dec 10, 2020 at 7:29
I can access the json version of the document via the url already (published and created share link) and deleted all header params from the axios request, but any other information here does not help either.. — Vario
– Vario, Commented Dec 10, 2020 at 9:52

Boussadjra Brahim · Accepted Answer · 2020-12-04 22:18:38Z

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>

answered Dec 4, 2020 at 22:18

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anjo Bautista Liwanag Over a year ago

Okay. If you could indulge me for my naivete. How do I make a v-data-table out of it? I've added headers: [{ text: "Employee ID", value: "gsx$employeeid" }, etc... to the data field and went as far as to add <v-data-table :headers="headers" :items="entries"> </v-data-table>. But the web shows like 100 rows of [object Object].

Boussadjra Brahim Over a year ago

You're looking to something like this stackoverflow.com/a/62995627/8172857

Boussadjra Brahim Over a year ago

ok, you missed to add $t [{ text: "Employee ID", value: "gsx$employeeid.$t" },

Collectives™ on Stack Overflow

Fetching spreadsheet data as JSON with axios and Vue.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest