Accessing headers of a google spreadsheet using HTTP GET and Google App Script

Question

I'm trying to return the header row of a Google spreadsheet using doGet() in a Google App Script that's running as a WebApp. I'm using a HTML form to send the GET request to the WebApp and it's all working except I don't know how to return the headers to my javascript. I'll post my code:

HTML:
        <form id="getForm" method="get" action="My URL for WebApp">
        <label for="sheetGetID">SheetID</label>
        <input type="text" name="sheetGetID" id="sheetGetID" value="">
        <button class="ui-btn" onclick='submitGET()'>Submit</button>
    </form>

Javascript:

function submitGET() {
  var headers = $("getForm").submit();
  alert(headers);
}

Google App Script:

function doGet(e) {
//Trying To: Get headers from sheetID and then return to app, then have correct labels for the inputs, then use POST to post.
var ss = SpreadsheetApp.openById(ScriptProperties.getProperty('active'));
var sheet = ss.getSheetByName(e.parameter["sheetGetID"]);

//Return the first 3 cells, A1:C1,
var headers = sheet.getRange(1,1,1,sheet.getLastColumn()).getValues()[0];
return ContentService.createTextOutput(JSON.stringify(headers))
.setMimeType(ContentService.MimeType.JSON);
}

I'm getting a JSON object returned but it's just a text output. My question is how would/could I get the JSON returned and stored as the headers variable?

Answer 1

So on your client end, I'm using JQuery Mobile, I'm not sure how to do it without it, you would do something like:

sheetID = $("#sheetGetID").val();
$.getJSON("https://script.google.com/macros/s/YOUR_KEY_GOES_HERE/exec?prefix=?",
    { sheetGetID: sheetID},
    function(results) {
    var fields = results.split(",");
    //Do something with fields
    }   
);
}

Where #sheetGetID is the textbox where the user can enter the sheet id for headers. Note the ?prefix=? appended to the URL, that part is for JQuery to know it's receiving JSON. That part is necessary. The URL is your deployed WebApp.

On the Google App Script side, ie Server side, you'd have something like:

function doGet(request) {
  var ss = SpreadsheetApp.openById(ScriptProperties.getProperty('active')); 
  var sheet = ss.getSheetByName(request.parameter["sheetGetID"]);
  //Return the first 3 cells, A1:C1,
  var headers = sheet.getRange(1,1,1,sheet.getLastColumn()).getValues()[0];

  var result = headers.join();
  var content = request.parameters.prefix + '(' +JSON.stringify(result) + ')';
  return ContentService.createTextOutput(content)
    .setMimeType(ContentService.MimeType.JSON);
}

If you have any questions on how the spreadsheet part works theres plenty of documentation on Google's API's. doGet() is called when you use the $.getJSON(), the return from the G.A.S. needs to be JSON. Most of this is covered in the documentation Google has, some of it I found watching Google Developers Live on youtube. If you are trying to do more stuff I highly recommend checking those sources out.

If you have any more questions about what's being called or parameters you can find it easily enough on Google.

Answer 2

The return of doGet method must be an HTML. Build another html page and use the call HtmlService.createTemplateFromFile('newPag.html').evaluate()

Inside your page use the tags and put your server side code manipulating the json object. This way you will create a good look and feel and a good maintanable code.

Answer 3

I got this to work a while ago, I forgot to post the answer just in case anyone else needed it.

You need to output it as a JSON object like the API demo. You also need to append "?prefix=?" to the url when you're doing a $.getJSON() call. The prefix part is to tell the JQuery that it is a JSON object you're receiving.

If anyone has troubles with this just comment and this and I'll post all the code I used.