谷歌应用程序脚本，将 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()