スプレッドシートのデータを元に、htmlのボタンのvalueの設定

実現したいこと

スプレッドシートをデータベースとして、動的にhtmlにボタンを作成したいと考えています。
また、作成したボタンのvalueはスプレッドシートの情報を元にした変数を利用したいです。

発生している問題・エラーメッセージ

色々と調べた結果、スプレッドシートのデータを配列に格納し、
配列数に応じたボタンの作成まではできました。

ただ、ボタンのvalueを変数値で設定する方法がわからない状態です。

該当のソースコード

コード.gs
function valsget() {
  let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("task");
　let vals = ss.getDataRange().getValues();

  return vals;
}


function doGet(){
  let htmloutput = HtmlService.createTemplateFromFile('index').evaluate();

  return htmloutput;

}
index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>  

    <table id='ボタン'>
      <tr>
        <th>ボタン</th>
      </tr>
    </table>

  </body>
</html>

<script
  src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
  integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
  crossorigin="anonymous">
</script>

<script>
　
　//webページの読み込み時に実行
  window.onload = function(){

    google.script.run.withSuccessHandler(function(dt){
      for(var i = 0; i<dt.length; i++){
        $('#ボタン').append('<input type="button" value="dt[i][0]")>');
      }
    }).valsget();
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

・質問文のソースコードの一部に全角スペースが含まれています。
全角スペースが含まれていると、正常に動かない場合があります。取り除いてください。

・getActiveSheet() でスプレッドシートを取得すると、正常にスプレッドシートを取得できない場合があります。
したがってスプレッドシートIDを指定します。

・HTML側のボタンの value に指定する文字列は、GASの関数を呼び出して取得した配列から、テンプレートリテラルを使うなどして、組み立てます。

js
1          $('#ボタン').append(`<input type="button" value="${dt[i][0]}")>`);

ただし、スプレッドシートからとってきた文字列を直接HTML要素の値に組み込むことになるので、サニタイジングしています。

全体

code.gs

js
1function valsget() {
2  let ss = SpreadsheetApp.openById(スプレッドシートのID).getSheetByName('task');
3  let vals = ss.getDataRange().getValues();
4  console.log(vals)
5  return vals.map(val=>val.map(v=> sanitize(v)));
6}
7
8function doGet(){
9  let htmloutput = HtmlService.createTemplateFromFile('index').evaluate();
10
11  return htmloutput;
12}
13
14function sanitize(str){
15  return String(str)
16    .replace(/"/g,'&quot;')
17    .replace(/</g,'&lt;')
18    .replace(/>/g,'&gt;')
19    .replace(/&/g, '&amp;')
20    .replace(/'/g, '&#39;');
21}

index.html

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
6    integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous">
7  </script>
8</head>
9
10<body>
11  <table id="ボタン">
12    <tr>
13      <th>ボタン</th>
14    </tr>
15  </table>
16  <script>
17    //webページの読み込み時に実行
18    window.onload = function() {
19      google.script.run.withSuccessHandler(function(dt) {
20        for(var i = 0; i<dt.length; i++) {
21          $('#ボタン').append(`<input type="button" value="${dt[i][0]}")>`);
22        }
23      }).valsget();
24    };
25      
26  </script>
27</body>
28</html>

投稿2022/07/10 12:31

編集2022/07/10 12:33

退会済みユーザー

総合スコア0

chocolatxx

2022/07/10 13:38

ありがとうございます。上手くいかないな、と思って一度コードをコピーさせていただいて挙動を確認したら上手くいき、無事解決することができました。テンプレートリテラルというのは、通常のクォーテーションではなく、バッククォーテーションを記述することで使うことができるんですね。一から順に本を読むより、作りたいものを作りながら理解を進めようとしていたため基礎的なところになるのでしょうか？ご回答いただきありがとうございました。

退会済みユーザー

2022/07/10 13:41

テンプレートリテラルの代わりに普通に＋記号を使ってもいいです。～append('<input type="button" value="'+dt[i][0]+'")>'); 要は「文字列を組み立てる」ということですね。（元のコードだとdt[i][0]という変数がクォーテーションの中に入ってしまっているため、変数の中身が展開されません）

行動規範の内容に同意します