How do I use Google Sheets as a Database for my HTML File?-CodePudding

I'm trying to create an html file that will gather data from a google spreadsheet and display the data on a textarea by clicking on buttons. I initially created one that the there is no database, my javascript would would just contain strings of data that would write on the textarea, but to make maintenance easier for the people at work i would like to create one that they would not need to update the javascript code anymore and just update the googlesheets data.

CodePudding user response：

Why not! In this case, you will need to publicly share your spreadsheet for reading, and you will be able to retrieve data in your html page using the json endpoint for example. https://codepen.io/mikesteelson/pen/wvevppe

var id = '_______your__id_____';
var gid = '0';
var url = 'https://docs.google.com/spreadsheets/d/' id '/gviz/tq?tqx=out:json&tq&gid=' gid;
fetch(url)
  .then(response => response.text())
  .then(data => document.getElementById("json").innerHTML=myItems(data.substring(47).slice(0, -2))  
  );
function myItems(jsonString){
  var json = JSON.parse(jsonString);
  var table = '<table><tr>'
  json.table.cols.forEach(colonne => table  = '<th>'   colonne.label   '</th>')
  table  = '</tr>'
  json.table.rows.forEach(ligne => {
    table  = '<tr>'
    ligne.c.forEach(cellule => {
        try{var valeur = cellule.f ? cellule.f : cellule.v}
        catch(e){var valeur = ''}
        table  = '<td>'   valeur   '</td>'
      }
    )
    table  = '</tr>'
    }
  )
  table  = '</table>'
  return table
}

here is a beautiful example ... https://www.menudiecilire.it/pizza.html, all data comes from spreadsheets

CodePudding user response：

To read / write data from google sheets, you'll need to use the Google Sheets API

You may need to setup a server to use OAuth so you can access users' google sheets.

For answers specific to these things, please find existing answers or ask a more specific question.