Spreadparser

Google Spreadsheet data for human beings... and developers!

## Resources Spreadparser turns a JSON endpoint from Google Spreadsheets into a easier to understand list of objects. **[View the Demo on CodePen →](https://codepen.io/teles/pen/OJWjWeE)** So, using Spreadparser could be useful for some goals such as: * ✅ Small web projects * ✅ Static generated websites * ✅ Projects consuming government generated data * ✅ Project prototyping * ✅ Generate and share pages for visualizing third party data * ✅ Studying project for frontend and backend developers * ✅ Small companies online stores * ✅ Allow non tech teams to provide data for tech teams * ✅ Use Spreadsheet to create and maintain app config files But it's probably not appropriate for: * 🛑 Automatic spreadsheet update * 🛑 Complex project based on relational database relations * 🛑 Project with a huge amount of data * 🛑 Google Spreadsheet data that can't be published to the web ## Features Features samples

* 📦 **Lightweigth**: less than 2kb and zero dependencies * 🧰 **Versatile**: Can be used for ES6/web projects, node project and as script tag * 👍 **Tested**: Highly covered with unit testing, written with typescript * 🎯 **Understands your data as it is**: * ➡️ `"TRUE"`, `"FALSE"` strings and checkboxes become boolean values `true` and `false` * ➡️ Integers and floats become real numbers like `10` e `0.33` * ➡️ Repeated title columns are parsed as arrays * ➡️ Allow spreadsheet data to be parsed as nested objects with inner properties and value * ➡️ Translate your data to your desired pattern like camel case or snake case ## Getting Started Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code. ### Publishing your Google Spreadsheet to web First of all you need to have a [Google Spreadsheet](https://docs.google.com/spreadsheets/u/0/) with your data and publish it to the web.

Check how to 'Publish to the web' in 4 steps ⬇️

1. On your spreadsheet click on File > Publish to Web

2. In the following dialog click on 'Publish'

3. Its Published! You don't need to copy the generated url

4. Open the JSON endpoint containing your data

The JSON url is made of your spreadsheet id, your spreadsheet id is part of your spreadsheet edition url.

For instance, if you have this spreadsheet edition url:

https://docs.google.com/spreadsheets/u/1/d/13FWF89zLCqKzeUzUfOwUqbRGhNSW3dLVHzItCe9WIAw/edit#gid=0

Your spreadsheet url is 13FWF89zLCqKzeUzUfOwUqbRGhNSW3dLVHzItCe9WIAw

Now that you have your spreadsheet JSON running let's use Spreadparser. ### 1. Include Spreadparser on your site. **Direct Download** You can [download the files directly from GitHub](https://github.com/spreadlab/spreadparser/archive/main.zip). ```html ``` **CDN** You can also use the [jsDelivr CDN](https://cdn.jsdelivr.net/npm/spreadparser/dist/). I recommend linking to a specific version number or version range to prevent major updates from breaking your site. Spreadparser uses semantic versioning. ```html ``` **NPM** You can also use yarn (or your favorite package manager). ```bash yarn add spreadparser ``` ### 2. Add the markup to your HTML. No extra configuration needed—just standard JavaScript. ```javaScript fetch(Spreadparser.getSpreadsheetUrl("1Rr2y3ljAJPApYXcPyLXwxLciUCxz8XCu1Q0OnWH1l-U", 2)) .then(response => response.json()) .then(json => Spreadparser.parse(json, {titleCase: 'camelCase'})) .then(spreadsheet => { console.log(spreadsheet.data[0]); // You can see this console.log output bellow }); ``` Giving us the following output: ```JSON { "nome":"Água", "hex":"#00FFFF", "rgb":{ "red":0, "green":255, "blue":255 }, "hsv": { "hue":"180°", "saturation":"100%", "value":"100%" }, "nomeWeb":"aqua" } ``` ## Installation (for web projects) Install it as a dependency: ```bash yarn add spreadparser # or npm install spreadparser ``` Now you can import Spreadparser as following: ```bash import Spreadparser from "spreadparser"; ``` ## Installation (for node projects) It is possible to use Spreadparser for server side projects using node. For instance you can create a 11ty blog or a command line tool with Spreadparser: Install it as a dependency: ```bash yarn add spreadparser # or npm install spreadparser ``` Now you can import Spreadparser as following: ```bash const Spreadparser = require("spreadparser/dist/umd/spreadparser.js"); ``` ## Using it as a third party library Spreadparser is available at jsDelivr CDN, for using it all you have to do is add proper url as script src to your HTML page: ```html