Portfolio of Steffen Muldbjerg

Use Google Sheet as your JSON-backend

Dec 28, 2017

I want to build more in 2018 – and I doesn’t mind if it’s quick and dirty. For that I sometimes need a simple way to throw in content. So, I spend the evening learning to use Google Sheets for managing content and getting it out with javascript.

Some things are just easier to edit in a spreadsheet. And there are even people who feel at home in spreadsheets 😉 This is the test data I used:

I really prefer to get data as JSON. It is the easiest to handle and change on the fly. I’m using gsx2json.com. It translates the spreadsheet into JSON for me.

If you want to fellow along, here are the 3 quick steps.

1. Publish To Web

Press “Files” → “Publish To Web”. It gives you a popup, where you press “Publish”. Afterwards you can close the popup.

2. Find the id

You need the id of the file – it is in the browser navigation bar. The structure is like this:


3. Get your data

Now you can write this code. Notice I’m using a jQuery get function here:

function getSheetData(){
   var url = "http://gsx2json.com/api?id=INSERT_ID_HERE";
   $.get(url, function( data ) {

It gives you JSON like this:

And there you go. Now you can use Google Sheets to update and manage your data.

I used it for an event program, with a lots of data points. It was really handy for managing it.

Hello Blog

I write about design and frontend stuff. And sometimes experiments.

Go check it out
How you save your websites forever

How you save your websites forever

A little guide to saving your website, and also saving you the time it takes to maintain outdated projects. Save the whole site as simple HTML pages.

”Where I lived”

”Where I lived”

I set myself a small assignment. Design something you know all about. Here are my entire lifes worth of homes.

My simple podcast setup

My simple podcast setup

Instead of just talking about it, here is the simple setup you need to start your own podcast. And you know you want to.