gooss.js
Use a Google spreadsheet as a database, no server-side code needed.
API
gooss.data(worksheets, callback)
The function will retrieve the given worksheets from Google, arrange the data into nice objects, and call your callback with the data when all the worksheets have been loaded.
worksheets is an object where each property is the name of a worksheet and
the value is an object with the properties url and index. See below for
an example.
callback(err, data) is called when the data has been
retrieved from the spreadsheet. If there has been an error, err will be set
to an error message, otherwise it will be null. data is an object that maps
the worksheet names given in worksheets to an array of rows from that
worksheet. Each array element is an object that maps each column name to its
value[1].
Example
This example uses the Food spreadsheet. Live demo
gooss.data(
{
Food: {
url: "https://docs.google.com/spreadsheet/ccc?key=0Ar35F5WUAjXedE9SMDRnT0dmUXdNQmJxeG5CRXpjSVE",
index: 0
},
Ingredients: {
url: "https://docs.google.com/spreadsheet/ccc?key=0Ar35F5WUAjXedE9SMDRnT0dmUXdNQmJxeG5CRXpjSVE",
index: 1
}
},
function (err, data) {
if (err) return alert(err);
console.log(data);
}
);
This will log to the console something like ("…" is more data):
{
Food: [
{ "Cooking time": 20, "Ingredients": "Butter\nSugar\nEggs\nFlour", "Name": "Cake", "Preparation time": 10 },
{ "Cooking time": 10, "Ingredients": "Eggs\nCheese", "Name": "Omelette", "Preparation time": 5 },
…
],
Ingredients: [
{ "Measure": "Weight", "Name": "Butter", "Picture": "http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Butter_at_the_Borough_Market.jpg/250px-Butter_at_the_Borough_Market.jpg" },
…
]
}
gooss.template(data [, templater])
This function will find all <script> tags with type text/html in the body
of the page and replace them with the rendered template wrapped inside a
<div>. The div will maintain all the attributes set on the script tag
(except type).
data is the data to be used in the template, most likely from inside the
gooss.data callback.
templater(template, data) (optional) is the templating function to use. It
should accept a template string (taken from the <script> tags) and a data
object. It must return a string. If not set it will use _.template() from
Underscore.js (you must load the
Underscore library onto your page).
Example
This example uses the data from the above example. Live demo
<body>
<h1>Menu</h1>
<script type="text/html" class="menu">
<ul>
<% for (var i = 0; i < Food.length; i++) { %>
<li><%- Food[i].Name %> (contains <% print(Food[i].Ingredients.replace(/\n/g, ", ")) %>)</li>
<% } %>
</ul>
</script>
<script type="text/javascript">
// Data has been set elsewhere. This line would probably be inside the
// gooss.data callback function.
gooss.template(data);
</script>
</body>
Will result in the DOM looking like:
<body>
<h1>Menu</h1>
<div class="menu">
<ul>
<li>Cake (contains Butter, Sugar, Eggs, Flour)</li>
<li>Omelette (contains Eggs, Cheese)</li>
</ul>
</div>
<script type="text/javascript">
…
</script>
</body>
Full examples
See a full example at http://stuartk.com/bundle
Quick start
Spreadsheet
- Go to http://docs.google.com/ and create a new spreadsheet.
- In the top right click "Share".
- Under "Who has access" click "Change".
- Select "Anyone with the link".
- Make a note of the "Link to share".
Website
- Clone this repository
- In
index.htmlset theurlto the one from above. - Code your template.
- Push to Github or your favourite static file host!
RSS feed (bonus)
- On your spreadsheet go to "File" > "Publish to the Web".
- Select your main worksheet, and click "Start publishing".
- Under "Get a link to the published data" select RSS.
- Put this in the first
<link>tag inindex.html.
Footnotes
[1] This is not the most space-efficient representation of the sheet, but it's the most developer friendly. I've designed gooss to be used with relatively small (<100 rows) worksheets.
License
Licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent