How to use Google Sheets Data as JSON in your front end, So simple.
You want to build a small front end app, maybe for demo purposes. You are running out of time. The thought of building an entire database-backed backend bothers you. Worry no more.
- Create the google sheet and populate it.
In my example, I have created a sheet with three columns: Height(cm), Weight(kg), T-shirt size, for helping us to keep a record of t-shirts worn by different people according to the above factors.
2. Sign up for Google Sheets API key
This must be the simplest API key to acquire since most of us have google accounts. So all you have to do is visit this link: https://console.developers.google.com/apis/credentials
Create credentials then
Copy the key and paste somewhere accessible.
3. Get the Spreadsheet URL
The spreadsheet is found in the browser when the sheet is open as highlighted below
4. Build the URL for Fetching data
Replace SPREADSHIT_ID with your spreadsheet ID above, API_KEY with you key obtained earlier.
For RANGE, replace this with the entire range of the values in your spreadsheet. For example, my entire data runs from A2 to C19, so my range was A2: C19
Your final URL should be:
Now you are ready to fetch some data in your application. You can try the link above in a browser and you will see something like this:
If you have different sheets in the spreadsheet you can replace the range with
All the best.