Ok, I re-thought the question, reworked my solution with the help of your answers ich I appreciate a lot! I got to a better solution by accessing the API from Google sheets, now I got the data in a js file I am wondering how can I import the data variable into a file and print it to the HTML DOM ' I am using Vue. '
//importing google api package
const {google} = require('googleapis');
const keys = require('./keys.json')
//https://developers.google.com/sheets/api/quickstart/nodejs
//https://console.cloud.google.com
//https://developers.google.com/identity/protocols/googlescopes
const client = new google.auth.JWT(
keys.client_email,
null,
keys.private_key,
['https://www.googleapis.com/auth/spreadsheets']
);
// checking conection to api we left tokens argument called but we are not using it
client.authorize(function(err/*,tokens*/){
if(err){
console.log(err);
return;
} else {
console.log('Connected!');
//stablishing conection
gsrun(client);
}
});
async function gsrun(cl){
const gsapi = google.sheets({version:'v4', auth: cl });
const opt = {
spreadsheetId: '10a44rqtdWcPQqYtBtne0ImmNOaqSuPsiM2YNiTdMiWo', // this is the google sheets id inside the url of the google sheets
range: 'Data!A1:L93' // this is the data range we are using from hola 1 file in google sheets we san swap to our own sheet tab name
};
let data = await gsapi.spreadsheets.values.get(opt);
console.log(data.data.values);
}
So the let = data
has the JSON data I need, its located in ./google-sheets-api.js
, but I want to pass it to a Vue3 component and print it as the HTML on a new Vue component like the one below:
<template>
<div id="sheetsapi">
<h3>attempt to read data from data from gs sheets api</h3>
<!-- here is here i want to print my data in i guess a Vue 3 let i in items loop -->
</div>
</template>
<script>
export default {
name: 'Vue3exp',
}
// the data variable is coming from ./google-sheets-api.js
</script>
so far is what I got... I tried some things but since I am new to Vue 3 I ran into a lot of errors hehe :D.
from How can I import DATA variable from js into a new vue component, then print the data in html DOM?
No comments:
Post a Comment