Google Sheets API parsing example

jboxstatus.js

/*
 * Jaimini's Box status page
 * Henry (chocolatkey) 2017
 */

// Reader DB
var mangaz = [[!status6]];

//https://stackoverflow.com/questions/4992383/use-jquerys-find-on-json-object
function getObjects(obj, key, val) {
    var objects = [];
    for (var i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            objects = objects.concat(getObjects(obj[i], key, val));
        } else if (i == key && obj[key] == val) {
            objects.push(obj);
        }
    }
    return objects;
}

function parseStatus(name, tooltip, status) {
    var toto = " ";
    if(status == "Waiting") {
        toto += "warning";
    } else if(status == "Working") {
        toto += "primary";
    } else if(status == "Done") {
        toto += "success";
    }
    return '<div class="columns small-2"><div class="badge cas bbad' + toto + '"><span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="' + tooltip + ' (' + status + ')">' + name + '</span></div></div>';
}

//https://stackoverflow.com/questions/10123953/sort-javascript-object-array-by-date
(function(){
  if (typeof Object.defineProperty === 'function'){
    try{Object.defineProperty(Array.prototype,'sortBy',{value:sb}); }catch(e){}
  }
  if (!Array.prototype.sortBy) Array.prototype.sortBy = sb;

  function sb(f){
    for (var i=this.length;i;){
      var o = this[--i];
      this[i] = [].concat(f.call(o,o,i),o);
    }
    this.sort(function(a,b){
      for (var i=0,len=a.length;i<len;++i){
        if (a[i]!=b[i]) return a[i]<b[i]?-1:1;
      }
      return 0;
    });
    for (var i=this.length;i;){
      this[--i]=this[i][this[i].length-1];
    }
    return this;
  }
})();

// https://stackoverflow.com/questions/33908299/javascript-parse-a-string-to-date-as-local-time-zone
/*  @param {string} s - an ISO 8001 format date and time string
**                      with all components, e.g. 2015-11-24T19:40:00
**  @returns {Date} - Date instance from parsing the string. May be NaN.
*/
function parseISOLocal(s) {
  var b = s.split(/\D/);
  return new Date(b[0], b[1]-1, b[2], b[3], b[4], b[5]).toUTCString();
}

// ID of the Google Spreadsheet
var spreadsheetID = "1_c9_iCngLLvMYhmGm_JfZORLG7ylT8LsXi5TN1Q8KEM";
// Muh amazingness
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";

// Get the sheet
$.getJSON(url, function(data) {
    $('#lupz').prepend('Last updated: ' + parseISOLocal(data.feed.updated.$t) + '');//.slice(0, -5)
    ii = 1; // Iterator
    var builder = '<div class="row">'; // Master builder
    var entry = data.feed.entry; // The rows (entries)
    entry.sortBy(function(o){ return new Date( o.gsx$modified.$t ) });
    entry.reverse();
    $(entry).each(function(){
        var fsrel = getObjects(mangaz, 'id', this.gsx$id.$t)[0]; // Get matching comic from reader
        var addnotes = this.gsx$additionalnotes.$t ? '<div class="callout small">' + this.gsx$additionalnotes.$t + '</div>' : '';
        builder += '<div class="large-6 columns"><div class="card">';
        builder += '<div class="row card-section"><div class="columns small-6"><a href="' + fsrel["link"] + '"><img src="' + fsrel["img"] + '" alt="' + this.gsx$series.$t + '"></a></div>';
        builder += '<div class="columns small-6"><h4>' + this.gsx$series.$t + '</h4>';
        builder += '<table><tbody><tr><td>Status</td><td>' + this.gsx$status.$t + '</td></tr>';
        builder += '<tr><td>Priority</td><td>' + this.gsx$priority.$t + '</td></tr>';
        builder += '<tr><td>Raws Freq.</td><td>' + this.gsx$rawsfreq.$t + '</td></tr>';
        builder += '<tr><td>Release Freq.</td><td>' + this.gsx$releasefreq.$t + '</td></tr>';
        builder += '<tr><td>Backlog</td><td>' + this.gsx$backlog.$t + '</td></tr>';        
        builder += '</tr></tbody></table>' + addnotes + '</div></div><div class="card-section"><div class="row">';
        
        // Muh statuses
        builder += parseStatus("TL", "Translator", this.gsx$tl.$t);
        builder += parseStatus("PR", "Proofreader", this.gsx$pr.$t);
        builder += parseStatus("CL", "Cleaner", this.gsx$cl.$t);
        builder += parseStatus("RD", "Redrawer", this.gsx$rd.$t);
        builder += parseStatus("TS", "Typesetter", this.gsx$ts.$t);
        builder += parseStatus("QC", "Quality Checker", this.gsx$qc.$t);
        builder += '</div></div></div></div>';
        if(ii % 2 == 0) {
            builder += '</div><div class="row">'
        }
        if(ii == entry.size) {
            while(ii % 2 != 0) {
                builder += '<div class="large-6 columns"></div>';
                ii++;
            }
        }
        ii++;
    });
    builder += '</div>'
    
    // We done
    $('#dataz').append(builder);
    $("#loadingz").hide();
    $("#dataz").show();


}).fail(function() { // Noooo! Provide alternative
    $('#mangas').append('<div class="alert callout"><h2>Error</h2><p>Error loading manga statuses. If all else fails, check <a href="https://docs.google.com/spreadsheets/d/' + spreadsheetID + '/pubhtml">here</a></p></div>');
});