Reference Google Spreadsheet (CSV) in Jekyll Data

Question

I am managing a website displaying a lot of tabular data (language stuff) and running on Jekyll. I really like to display content based on a CSV file stored in the _data folder of Jekyll.

I would like to be able to edit / add / remove content from this CSV directly on Google and then reference it to Jekyll (like a shortcut or something that sync the CSV content from Google to my static folder).

Which way would be the simplest to reference an external file (either in the _data folder or directly in my templace). I can find the CSV file with this kind of link but downloading it every time is a hassle (https://docs.google.com/spreadsheets/d//export?format=csv).

How can Jekyll understand data from external stored file (maybe in javascript ?).

Thank you.

Answer 1

Getting datas from google docs is becoming harder ;-(

I've tried with jquery.ajax but I met the CORS limitation.

Then I found tabletop and it works !

• go to your google spreadsheet and File > Publish to the web > Start publishing
• note the publish url
• download tabletop script and save it to eg: js/tabletop.js

• put a link at the bottom of your _includes/header.html eg

  <script src="`{{ site.baseurl }}`/js/tabletop.js"></script>
  

• in a data.html page put

  ---
  title: csv to json
  layout: page
  ---
  <div id="csvDatas"></div>
  

• you can now get your datas with a js/script.js file that you've also included at the very end of you _includes/footer.html

  var csvParse = function() {
  
      // put you document url here
      var sharedDocUrl = 'https://docs.google.com/spreadsheets/d/1Rk9RMD6mcH-jPA321lFTKmZsHebIkeHx0tTU0TWQYE8/pubhtml'
  
      // can also be only the ID
      // var sharedDocUrl = '1Rk9RMD6mcH-jPA321lFTKmZsHebIkeHx0tTU0TWQYE8'
  
      var targetDiv = 'csvDatas';
  
      // holds datas at a closure level
      // this then can be accessed by closure's functions
      var dataObj;
  
      function showInfo(data, tabletop) {
          dataObj    = data;
          var table  = generateTable();
          var target = document.getElementById(targetDiv);
          target.appendChild(table);
      }
  
      function generateTable(){
          var table = document.createElement("table");
          var head  = generateTableHeader();
          table.appendChild(head);
          var body  = generateTableBody();
          table.appendChild(body);
          return table;
      }
  
      function generateTableHeader(){
          var d         = dataObj[0];
          var tHead     = document.createElement("thead");
          var colHeader = [];
          $.each(d, function( index, value){
              console.log(index + ' : ' + value);
              colHeader.push(index);
          });
          var row = generateRow(colHeader, 'th');
          tHead.appendChild(row);
          return tHead;
      }
  
      // this can be factorized with generateTableHeader
      function generateTableBody(){
          var tBody = document.createElement("tbody");
          $.each(dataObj, function( index, value ){
              var rowVals = [];
              $.each(value, function(colnum, colval){
                  rowVals.push(colval);
              });
              var row = generateRow(rowVals);
              tBody.appendChild(row);
          });
          return tBody;
      }
  
      function generateRow(headersArray, cellTag){
          cellTag = typeof cellTag !== 'undefined' ? cellTag : 'td';
          var row = document.createElement("tr");
          $.each(headersArray, function( index, value){
              if( value != "rowNumber"){
                  var cell     = document.createElement(cellTag);
                  var cellText = document.createTextNode(value);
                  cell.appendChild(cellText);
                  row.appendChild(cell);
              }
          });
          return row;
      }
  
      return {
          init: function() {
  
              if( $('#' + targetDiv).length ){
                  Tabletop.init( { key: sharedDocUrl  ,
                           callback: showInfo,
                           simpleSheet: true } );
              }else{
                  console.log('Not the good page to parse csv datas');
              }
          }
      };
  }();
  
  $( document ).ready(function() {
      csvParse.init();
  });