谷歌應用程序腳本，將 object 從服務器發送到 HTML 模板和 javascript

Question

我正在將數組 from.gs 代碼發送到我的頁面。html
If I parse my object directly in the HTML code, no problem, but if I try to put it in a javascript variable, using JSON.parse(), no chance.

我究竟做錯了什么？

.GS 代碼 doget()

var htmlTemplate = HtmlService.createTemplateFromFile('Index');
  htmlTemplate.colors = colors;
  htmlTemplate.jobs = extractDataFromSheet(approvedReal); <-- I can use in html
  htmlTemplate.admin = adminFound;
  htmlTemplate.approved = approvedReal;
  return htmlTemplate.evaluate();

HTML 沒問題，我可以根據需要構建我的 HTML 頁面：

<? for(var row=0;row<jobs.length;row++){
       var current = jobs[row];?>
        <div class='row no-gutters'>
        <?for(var col=0;col<current.length;col++){
            var singleJob = current[col];
            ... so on

但是，如果我嘗試將值放入 javascript var，則只獲取字符串

 <script>
     var approved = <?= approvati ?>;
     var newPostit = false;
     var jobs0 = <?= JSON.stringify(jobs) ?>;  <--see image-1
     var jobs1 = <?= JSON.parse(jobs ) ?>; <--see image-2
........

jobs0包含您在圖像中看到的內容，但無法將其轉換回我的 object 並使用它：

jobs1是 object 但無法提取數組，如果我使用jobs1[0]我沒有數組，但 char 'V'

Answer 1

有 3 種類型的腳本：

• 標准： <?..?> ：沒有 output 到 html
• 打印： <?=..?> ：輸出數據，但將其轉義以避免 xss 攻擊
• 強制打印： <?.=.??> ：按原樣輸出數據。

由於傳遞的數據是 json，因此您應該使用強制打印腳本。

Answer 2

根據最佳實踐，加載 html 頁面並動態拉入值以呈現它們。 請參見下面的示例：

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

基於此，您的設置如下：

在您的后端：

function extractDataFromSheet( dataFromSheet ){
  // this you already have
}

然后在前端調用后端 function 並處理響應：

function handleSuccess( dataFromSheet ){
  var data = dataFromSheet;
  // work with data here
}

// here we call the back-end function and tell it to run the function above
google.script.run
  .withSuccessHandler(handleSuccess)
  .extractDataFromSheet()