Google Appscript has the capability to transfer data from server-side scripting to client-side HTML.
E.g.
appscript.gs
var htmlServ = HtmlService.createTemplateFromFile("addDetailsBookingForm");
let order_id = getSheetOrderID(sheet); //let order_id = "98";
htmlServ.order = pullOrderStore(order_id) // let's say this is an array
const html = htmlServ.evaluate();
html.setWidth(850).setHeight(450);
const ui = SpreadsheetApp.getUi();
ui.showModalDialog(html, "form");
I would like to send JSON through this interface. However, it appears that objects are not supported. Strings and arrays can be sent but not objects.
But, it seems possible to convert a JSON object into a string before sending it, then parse it on the client side to turn it back into an object.
Drawing inspiration from here, I was considering something like
var htmlServ = HtmlService.createTemplateFromFile("addDetailsBookingForm");
let order_id = "98";
orderDetailsObject = pullFromWordPressOrder(order_id)
htmlServ.orderDetailsObject = JSON.stringify(orderDetailsObject)
Logger.log(htmlServ.orderDetailsObject)
<etc>
displayjsonfile.html
<script>
// This will output orderDetailsObject from the server side into orderDetailsObject on the client side. Although they have the same name, they are distinct variables.
var orderDetailsObject = <?=orderDetailsObject?>;
var product_object = JSON.parse(orderDetailsObject);
console.log(product_object)
var order_id = product_object.id //ToTest
An example of JSON data:
{"id":98,"parent_id":0,"status":"pending","currency":"GBP",... (data continues)
The current output of the JSON object in the HTML shows encoding issues with double quotation marks.
Is this behavior expected, or is there a better approach to handling this?
To clarify - while the solution works, it doesn't seem elegant or best practice.