How to use Google Sheets Data as JSON in your front end, So simple.

Hoslack Ochieng
Jun 21 · 2 min read

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.

  1. 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:

Click on Create credentials then api key

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 SheetName!RANGE Example: Sheet1!A2:C19

All the best.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade