Parsing a stringified JSON coming from a Google Sheet Web App

user_14390613 0
Viewed 614

I'm trying to parse a stringified JSON output from a web app created from a google sheets script. I thought it couldn't be that complicated, but I've tried everything I could think of or find out online... so now asking for help if that's OK!

on the web app / Google Sheets side, the code is:

function doGet(e) {
  
  var spreadsheet = SpreadsheetApp.openById('spreadsheetID');
  var worksheet = spreadsheet.getSheetByName('Rankings C/U');
  var output = JSON.stringify({ data: worksheet.getDataRange().getValues() });
  
  return HtmlService.createHtmlOutput(output);
}

I've published the script, the web app works, I'm OK with that bit.

I've put random values on the spreadsheet: [[1,2],[3,4]] if we speak in matrix format.

on the other end, I've tried a bunch of stuff including .fetch, JSON.parse() to get the data in a usable format within the Google Sites embedded code, but the real issue is that I think I can't get to allocate the payload to a variable?

I'm using Google Sites to fetch the data. with the basic module "<> embed", with the "by URL" option, with the following code:

https://script.google.com/macros/s/scriptID/exec

I get the following output - that looks what it should be:

{"data":[[1,2],[3,4]]}

but when trying to include this in a script module ("embed code") - no chance!

<form name="get-images">
  <input name="test" id="test" value="we'll put the contents of cell A1 here">
</form>

<script>
   const form = document.forms['get-images']
   var usableVariable = JSON.parse("https://script.google.com/macros/s/scriptID/exec"); // here I'm trying to allocate the stringified JSON to a variable
   form.elements['test'].value = usableVariable[1,1]; //allocating the first element of the parsed array  
</script>

I'm pretty sure I'm missing something obvious - but now I ran out of ideas!

Thanks for any help :)

google-apps-script google-sheets web-applications javascript
1 Answers

I believe your goal as follows.

  • In your situation, the bottom script is embedded to the Google site.
  • You want to retrieve the values from doGet and want to put the value of cell "B2" to the input tag.
  • The settings of Web Apps is Execute the app as: Me and Who has access to the app: Anyone, even Anonymous.

Modification points:

  • In your case, I think that return ContentService.createTextOutput(output); is suitable instead of return HtmlService.createHtmlOutput(output); in Google Apps Script.
  • In order to retrieve the values from doGet, in this modification, fetch is used.
  • You want to retrieve the cell "B2" from usableVariable[1,1];, please modify it to usableVariable[1][1];

When above points are reflected to your script, it becomes as follows.

Modified script:

Google Apps Script side:

function doGet(e) {
  var spreadsheet = SpreadsheetApp.openById('spreadsheetID');
  var worksheet = spreadsheet.getSheetByName('Rankings C/U');
  var output = JSON.stringify({ data: worksheet.getDataRange().getValues() });
  return ContentService.createTextOutput(output);
}

HTML & Javascript side:

<form name="get-images">
  <input name="test" id="test" value="we'll put the contents of cell A1 here">
</form>

<script>
  let url = "https://script.google.com/macros/s/###/exec";
  fetch(url)
    .then((res) => res.json())
    .then((res) => {
      const usableVariable = res.data;
      const form = document.forms['get-images'];
      form.elements['test'].value = usableVariable[1][1];  // usableVariable[1][1] is the cell "B2".
    });
</script>

Note:

  • When you modified the Google Apps Script of Web Apps, please redeploy the Web Apps as new version. By this, the latest script is reflected to the Web Apps. Please be careful this.
  • In my environment, I could confirm that above HTML & Javascript worked in the Google site by embedding.

References:

user_71086530
Related