0

I want to try to connect google sheets to my website, but before I do it I tried to search if is it possible to get data (read) from google sheets so I can show it in my website using javascript. what I want to achieve is to fetch the data so I can show it in my websites, but I'm quite confused if is it really possible or not?

so this is what I want to achieve:

  1. User fill the google form that I share to my users
  2. Data will be stored in google sheet (since this is the default option from google form)
  3. I want to fetch the stored data from google sheets to my websites so they can see the other response from the survey

is it possible to achieve it only using javascript and google sheets?

for information I already read some of source but still confused as to implement it in vanilla.js (normal javascript without any framework such as vue.js or react.js):

  1. https://robkendal.co.uk/blog/reading-google-sheets-data-using-javascript-with-google-sheets-reader
  2. Parse a Google spreadsheet into a Javascript array
  3. How to retrieve data from Google Spreadsheet to Javascript or JSON?

this is example of my spreadsheet public if you want to try it:

https://docs.google.com/spreadsheets/d/e/2PACX-1vS7fJjjdC95htb0nYuIMMkNKQ8WIZz01wdEVq_mZ_L3XrTn_rzXT5aKKQX_WTUsOvTwALVwGwm8mE1t/pubhtml?alt=json

can someone help me about this?

Rakish Frisky
  • 665
  • 7
  • 23
  • It depends on what exactly you want to accomplish. If you want to retrieve the content from a non-public spreadsheet, you can use Sheets API to retrieve this data using JavaScript. Take a look at [this quickstart](https://developers.google.com/sheets/api/quickstart/js). If you just want to embed a spreadsheet you've published to the web into your website, following [these steps](https://support.google.com/docs/answer/183965#embed_files&zippy=%2Cedit-embedded-spreadsheets). Does that answer your question? If not, please consider providing more details and I'll be able to expand on this. – Iamblichus Jul 08 '21 at 07:47
  • @lamblichus thankyou for your response, from your explanation, what I want to achieve is the first one, I want to fetch spreadsheet data so I can show it in my web, let me check the quickstart first, since I'm quite confused from where I should start – Rakish Frisky Jul 08 '21 at 08:26
  • 1
    @lamblichus thankyou after try several times it took a long way to achieve it, and I find an easier way to achieve what I want to do, it is using `tabletop.js` you can see the way to implement it in my answer – Rakish Frisky Jul 10 '21 at 07:58

1 Answers1

2

After trial and error several times, and check a lot of documentation, finally I can solve it using tabletop.js this is quite easy to implement, I tried to use @lamblichus comment to try the quick start but it need a long way to achieve it, but when I stumble in a forum I read someone try to use Tabletop.js library and yup it is easier to setup than using google spreadsheet API for me, this is the link for the library:

Tabletop.js

in there the guide to achieve it quite easy with step by step guide to set your spreadsheet setting so you can fetch it to your project.

this is the example of my code:

<!DOCTYPE html>
<html>

<head>
  <title>PublicBoard Spreadsheet Test using Tabletop.js</title>
  <meta charset="utf-8" />

  <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
  <script type='text/javascript'>
    var response = [];

    var publicSpreadsheetUrl =
      'https://docs.google.com/spreadsheets/d/1VkFEE5o-auS4E6FIzVtUzwU2dCARruBxEOOl1gnZhnc/edit?usp=sharing';

    function init() {
      Tabletop.init({
        key: publicSpreadsheetUrl,
        callback: showInfo,
        simpleSheet: true
      })
    }

    function showInfo(data, tabletop) {
      alert('Successfully processed!')
      console.log(data);
    }

    window.addEventListener('DOMContentLoaded', init)
  </script>
</head>

<body>
  <p>PublicBoard Spreadsheet Test using Tabletop.js</p>
</body>

</html>
Rakish Frisky
  • 665
  • 7
  • 23