GASで、スプレッドシートの値をHTMLに表示したい

Question

スプレッドシートの値をHTMLに表示したい

スプレッドシートのセル（C4）の値を
HTMLのテキストエリアに表示したい

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

JSONからの取得が不可能

エラーメッセージ

特になし

該当のソースコード

function doGet() {
  var html = HtmlService.createHtmlOutputFromFile('top.html');
  html.setTitle("情報");
  html.setFaviconUrl("https://drive.google.com/uc?id=13wY_LsPFagcYs2UwCAkn4WeBNS3hnu__&.ico");
  return html;
}

//リンクをHTML側に返してあげる関数
function poplink(){
  var sheet = "ID";
  //シートを取得
  var list = SpreadsheetApp.openById(sheet).getSheetByName("検索").getRange("C4").getValue();
  Logger.log(list);
  //取得データを返す
  return JSON.stringify(list);
}
 

           <script>
              //スプレッドシート側からデータを取得する
              google.script.run.withSuccessHandler(onSuccess3).poplink();

              function onSuccess3(data){
                var json = JSON.parse(data);
                
                //ラベルを入れる
                var link_html = "";
                //textareaタグの頭を入れる
                link_html += "<textarea name="link" id="link" cols="110" rows="1" type="text">";

                //HTMLデータの生成
                link_html += json;

                //textareaタグの下を入れる
                link_html += "</textarea>";
                
                //プルダウンメニューを設置する
                document.getElementById("link").innerHTML = link_html;
              }
            </script>
            <div >
              <span id="link";></span> 
            </div> 

Answer 1

SpreadSheetのデータなど基本的にGASを使ってGoogleのサービスで得たデータををHTMLに表示したいのであれば createTemplateFromFileを使ってHTMLTemplateでGASで取得したデータを埋め込むのが良いと思います。（なにか他に特別な事情がなければ）

参考https://developers.google.com/apps-script/guides/html/templates#calling_apps_script_functions_from_a_template

つまり、doGet関数の最初の行を

function doGet() {
  var html = HtmlService.createTemplateFromFile('top.html').evaluate()
  // ...

のようにして、またpoplinkでJSONを返してるところを、

function poplink(){
  // .... (中略)

 
 return list;
}

と返して、このpoplink()関数を、テンプレートで埋め込むと良いように思います。

<div >
    <span id="link">
        <textarea name="link" id="link" cols="110" rows="1" type="text">
        <?= poplink() ?>
        </textarea>
     </span> 
</div> 

実際コードを試しているわけではないのですが、たぶんこれで希望のことができるんじゃないかと思います。

Comments

[masaof]

ありがとうございます。
自分が行いたいようにできたのですが、1点だけ気になる点がありますので
もし可能であれば、教えてください。

現在C4の値をテキストエリアに表示することは可能になりました。
しかし、18個分のホワイトスペースが頭にはいってしまいます。
これはなぜでしょうか。。

[nobkz]

あー、テキストエリアの埋め込むときに、変数にうっかり空白文字が入ってしまっている、またはpoplink()取得セルに空白文字が入ってしまっているかどっちかかなーと思います。

[masaof]

確認遅れてしまいました。
取得セルには空白文字がないので、
前者かとおもいます。

解決策としては、
変数の中の最初の18文字を削除していれるという処理をかけばよろしいでしょうか

[masaof]

再度見返したところ、後ろ18文字にも空白がありました。

[masaof]

<textarea></textarea>を改行したことにより、
インデントが<textarea>の中に入るというものでした。