1

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.

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
Anjo Bautista Liwanag
  • 129
  • 10
  • I'm trying to do the same thing, but I'm getting the following error: "Access to XMLHttpRequest at 'https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://spreadsheets.google.com/feeds/list/{ID}/1/public/values?alt%3Djson&followup=https://spreadsheets.google.com/feeds/list/{ID}/1/public/values?alt%3Djson&ltmpl=sheets' (redirected from 'https://spreadsheets.google.com/feeds/list/{ID}/1/public/values?alt=json') from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ideas? – Vario Dec 10 '20 at 07: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 Dec 10 '20 at 09:52

1 Answers1

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>
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
  • 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 . But the web shows like 100 rows of [object Object]. – Anjo Bautista Liwanag Dec 04 '20 at 23:14
  • You're looking to something like this https://stackoverflow.com/a/62995627/8172857 – Boussadjra Brahim Dec 04 '20 at 23:20
  • ok, you missed to add `$t` `[{ text: "Employee ID", value: "gsx$employeeid.$t" },` – Boussadjra Brahim Dec 04 '20 at 23:26