jquery google spreadsheet csv

Question

I use a jQuery script to show a csv file (from google spreadsheets) in an html table. When I use 'test.csv' - with the csv-file in the same folder as the script -, it works, but when I add the url from google spreadsheets, it stops working.

<script>
$(function() {
    $.get('https://docs.google.com/spreadsheet/pub?key=(key)&single=true&gid=8&range=A12%3AB34&output=csv', function(data) {
        $('#CSVSource').html('<pre>' + data + '</pre>');
    });
    $('#CSVTable').CSVToTable('https://docs.google.com/spreadsheet/pub?key=(key)&single=true&gid=8&range=A12%3AB34&output=csv', { loadingImage: 'images/loading.gif', startLine: 0 });
    $.get('test.tsv', function(data) {
        $('#TSVSource').html('<pre>' + data + '</pre>');
    });
(...)

The script comes from http://code.google.com/p/jquerycsvtotable/ (I use this script on Google App Engine (Java) )

Answer 1

You are making a cross-domain request here. As far as I can tell this is not allowed (yet?): there are no CORS headers in a response from Spreadsheet API.

You'll have to move this part somewhere to your server/backend.

If you just need to display your worksheet data in a table, there are other ways to do it, directly from a Spreadsheet (using charts).

Answer 2

Use JSONP to get using the java script which allows cross domain. I have coded an simple library to handle it. Check it out at Gsheet2json