Parse Google Spreadsheet with JavaScript

by KevinGabbert

HTML

<script src="https://spreadsheets.google.com/feeds/cells/1uOyKlAhppYBboW3wrXK4UgEHxcporEgwCgqSpwKM8hk/1/public/full?alt=json"></script>

<h1>Parse Google Spreadsheet with JavaScript</h1> 

<div id="data" />

CSS

table {
      border-collapse: collapse;
      width: 100%;
  }
  th, td {
      border: thin solid black;
      padding: 3px;
      text-align: left
  }
  tr.head th, tr.head td {
      background-color: #EDEDED;
      border-bottom: 4px double black;
  }
  h1 {
      text-align: center;
  }
  body {
      margin: 12px;
      font-size: 12px;
  }

JavaScript

var spData = null;

  function doData(json) {
      spData = json.feed.entry;
  }

  function drawCell(tr, val, isHeader) {
      var td = $(isHeader ? "<th/>" : "<td/>");
      tr.append(td);
      td.append(val);
      return td;
  }

  function drawRow(table, rowData, isHeader) {
      if (rowData == null) return null;
      if (rowData.length == 0) return null;
      var tr = $("<tr/>");
      if (isHeader) tr.addClass("head");
      table.append(tr);
      for (var c = 0; c < rowData.length; c++) {
          drawCell(tr, rowData[c], ((c == 0) || isHeader));
      }
      return tr;
  }

  function drawTable(parent) {
      var table = $("<table/>");
      parent.append(table);
      return table;
  }

  function readData(parent) {
      var data = spData;
      var table = drawTable(parent);
      var rowData = [];
      var row = 0;

      for (var r = 0; r < data.length; r++) {
          var cell = data[r]["gs$cell"];
          var val = cell["$t"];
          if (cell.col == 1) {
              drawRow(table, rowData, (row == 1));
              rowData = [];
              row++;
          }
          rowData.push(val);
      }
      drawRow(table, rowData, (row == 1));
  }
  $(document).ready(function () {
      readData($("#data"));
  });