.gs⇒.htmlへ配列の値を渡してプルダウンで表示させる方法

Google Apps Scriptにて、
scriptで配列を作成し、html（ウェブアプリケーションとして導入）にて
プルダウンとして表示させたいです。

そもそもonclickではないのだろうなと気付いておりますが、
どう反映させればいいのか…無知で恐縮ですが、お助け願います。

仮.gas　

※メモ※昨日papinianus様にご教示いただいた内容は未反映です

function set_availability(sheet, column, id){

//時間の記載されているSS
 var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 var availability_spreadsheet = spreadsheet.getSheetByName('SS');

  var calendar_id = "アドレス１";
  var calendar_id2 = "アドレス２";

  var last_row = availability_spreadsheet.getLastRow()
  var calendar_info = CalendarApp.getCalendarById(calendar_id);
  var calendar_info2 = CalendarApp.getCalendarById(calendar_id2);

  //ステータス列の判定
  var array_data=[];
  var array_data1=[];
  var array_data2=[];

  for(var i = 3; i <= last_row; i++){

   //SS3行目から30分ごとに時間が記載されています
    var start_date_base = availability_spreadsheet.getRange(i, 1).getValue();
    var start_date_tmp = new Date(start_date_base);
    var end_date_tmp = start_date_tmp.setMinutes(start_date_tmp.getMinutes()+30);
    var start_date = new Date(start_date_base);
    var end_date = new Date(end_date_tmp);

    var myEvents= calendar_info.getEvents(start_date, end_date);

    var myEvents2= calendar_info2.getEvents(start_date, end_date);

//予定がなかったら格納    
    if (myEvents.length == 0){
      var start_date_in = Utilities.formatDate(start_date , "Asia/Tokyo", "yyyy/MM/dd HH:mm");
      array_data.push(start_date_in);
    }

//予定がなかったら格納    
     if (myEvents2.length == 0){
      var start_date_in = Utilities.formatDate(start_date , "Asia/Tokyo", "yyyy/MM/dd HH:mm");
      array_data.push(start_date_in);
    }

  }

  var _ =Underscore.load();
  var array_data = _.intersection(array_data1,array_data2);

  Logger.log(array_data);
　return array_data;

//array_dataの中身は
 [2018/10/27 09:00, 2018/10/27 09:30, 2018/10/27 10:00～]のような日付の文字列を想定

  };

仮.html

<!DOCTYPE html>
<html>
<head>
    <div class="select_style">
     <select id= "start_time" name="start_time" onclick="createSelectBox()" required>
     </select>
    </div>
</head>
</html>

function createSelectBox(){
   google.script.run.withSuccessHandler(
   function(array_data) {
    for(var i=0;i<array_data.length;i++){
      let op = document.createElement("option");
      op.value = array_data[i].val;  //value値
      op.text = array_data[i].txt;   //テキスト値
      document.getElementById("start_time").appendChild(op);
    }
  }).set_availability();
};

};

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

回答1件

ベストアンサー

例えばcreateSelectBox()を次のように変更するのは如何でしょうか。GAS側からの値はwithSuccessHandler()を使用して取得しています。downlist()はサンプルとして使いましたので修正をお願いします。

GAS側のサンプル

javascript
1function downlist(){
2  var res = [{val: "val1", txt: "txt1"}, {val: "val2", txt: "txt2"}, {val: "val3", txt: "txt3"}];
3  return res;
4};

変更したHTML

javascript
1function createSelectBox(){
2  google.script.run.withSuccessHandler(function(res) {
3    for(var i=0;i<res.length;i++){
4      let op = document.createElement("option");
5      op.value = res[i].val;  //value値
6      op.text = res[i].txt;   //テキスト値
7      document.getElementById("start_time").appendChild(op);
8    }
9  }).downlist();
10};

追加

Web AppsをdoGet()を使ってブラウザから起動している。
そちらのHTMLは一部ではなく実際にそのものを使用している。

上記のように仮定して修正したHTMLを下記に記載致します。下記HTML, GASをコピーペーストした後は、Web Appsを新たなバージョンとして再デプロイしてください。

修正したHTML

下記をHTMLへコピーペーストしてください。

javascript
1<div class="select_style">
2<select id="start_time" name="start_time" onclick="createSelectBox()" required></select>
3</div>
4<script>
5function createSelectBox(){
6  google.script.run.withSuccessHandler(function(res) {
7    for(var i=0;i<res.length;i++){
8      let op = document.createElement("option");
9      op.value = res[i].val;  //value値
10      op.text = res[i].txt;   //テキスト値
11      document.getElementById("start_time").appendChild(op);
12    }
13  }).downlist();
14};
15</script>

GAS側

本質問の回答としてはGAS側のスクリプトは特に問題になりませんのでサンプルとして下記を使用してください。

javascript
1function downlist(){
2  var res = [{val: "val1", txt: "txt1"}, {val: "val2", txt: "txt2"}, {val: "val3", txt: "txt3"}];
3  return res;
4};

追加2

ご用意されているHTMLでのop.value = array_data[i].val, op.text = array_data[i].txtに合わせるためにGAS側のスクリプトにある最終行のreturn array_data;を次のように変更して動作をご確認ください。スクリプトを変更した際は、新たなバージョンとしてWeb Appsを再デプロイしてから実行してください。これをしないと変更されたスクリプトが反映されませんので注意してください。

javascript
1return array_data.map(function(e, i){return {val: i, txt: e}});

投稿2018/10/15 12:17

編集2018/10/18 03:02

kisojin

総合スコア899

_af28_

2018/10/15 13:45

ご回答ありがとうございます！こちらについてですが、HTML部分の修正は不要でしょうか。プルダウンに表示されず…ご確認よろしくお願いいたします。

kisojin

2018/10/15 23:58

今、HTMLについては修正なしで動作することを確認しました。ただ、使用されているHTML側のスクリプトの状態が不明瞭なため、そちらの状況が分かりません。もしも"仮.html"のそのままのスクリプトを使用しており、createSelectBox()のみを修正した場合は、「形式が正しくない HTML コンテンツ」といったエラーが発生すると思われます。実際にテストで使用されており、そちらの現状の問題が再現できるスクリプトを表示していただくことは可能でしょうか。

kisojin

2018/10/16 00:18

少し心配したのですが、もしもWeb Appsとしてスクリプトを実行している場合、スクリプトを変更した際は、新たなバージョンとしてWeb Appsを再デプロイしてから実行してください。これをしないと変更されたスクリプトが反映されません。もしもすでにこれを実行されている場合は、お手数ですが、問題が再現できるスクリプトをお教えいただけないでしょうか。

_af28_

2018/10/16 01:37

スクリプトを変更した際は、新たなバージョンとしてWeb Appsを再デプロイしてから実行してください。⇒こちらが漏れておりました、失礼いたしました。無事反映することができました。が、script上のlogでは表示させたい文字列が出るのですが、プルダウンには「undefined」と出てしまいます。配列の中身を取得する部分を修正して追記させていただきます。

kisojin

2018/10/16 02:11

一つの問題をクリアしたとのこと、確認しました。しかしながら、現在表示されているスクリプトでは問題を再現することができません。そのため、お手数ですが仮.gas, 仮.htmlともに問題が再現できるスクリプトをお教えいただけないでしょうか。

_af28_

2018/10/16 02:39

何度も申し訳ございません。更新した内容にて再現可能かと思います。お手数ですがよろしくお願い致します。

kisojin

2018/10/16 04:32

私の説明不足で申し訳ありません。勘違いされているように思われます。問題はHTML側のcreateSelectBox()にあることは回答で示しました。この問題ではGAS側はサンプルの出力で対応できます。また、修正された内容ではそちらの問題を再現することはできません。そちらの「プルダウンに表示されず…」を再現できる最新のHTML側のスクリプトを表示していただけないでしょうか。

_af28_

2018/10/16 07:30 編集

何度も申し訳ございません、勘違いしておりました。現代のgas、htmlへ更新いたしました。このままだとプルダウンにundefined出ます。よろしくお願い致します。

kisojin

2018/10/16 08:01

状況を仮定して修正してみました。ご確認ください。これでもまだ同様の問題が発生するようですと、大変お手数ですが、現状の問題を再現することのできるスクリプト並びに設定条件を表示していただけないでしょうか。

_af28_

2018/10/17 06:58

何度もご対応いただきありがとうございます。ご提案のdownlist()の var res = [{val: "val1", txt: "txt1"}, {val: "val2", txt: "txt2"}, {val: "val3", txt: "txt3"}]; であれば、プルダウンにtx1,tx2,tx3が出るのですが、こちらの準備している日付だとすべてundefinedとなります。質問欄に記載のスクリプトにて発生するのですがいかがでしょうか。よろしくお願い致します。

kisojin

2018/10/17 07:59 編集

表示されたGASのスクリプトがそのままの内容で使用していると仮定すると、set_availability()から値が返されていません。もしもarray_dataに値が入っているのだとすると、set_availability()内の最後の行にreturn array_dataを追加して動作を確認してみてください。スクリプトを変更した際は、新たなバージョンとしてWeb Appsを再デプロイしてから実行してください。これをしないと変更されたスクリプトが反映されませんので注意してください。

kisojin

2018/10/17 12:11 編集

1点補足させていただきます。そちらのHTMLではGASから送られた値をarray_data[i].valとarray_data[i].txtで使用していますので、GAS側からもそれに合わせたオブジェクトを返す必要があることにご注意ください。サンプルは、私の回答のGAS側のスクリプトを参考にしてください。[{val: "val1", txt: "txt1"},,, のようなオブジェクトを返すようにしてください。[1, 2, 3,,]のような場合はundefinedになってしまいます。

_af28_

2018/10/18 02:13

2点目のご指摘の通り、[1, 2, 3,,]このような格納方法であるためエラーがでているようです。大変無知で恐縮ですが、仮.gas内のarray_dataに[{val: "val1", txt: "txt1"},,, のように格納する方法はございますでしょうか。

kisojin

2018/10/18 03:02

コメントだけで済ませてしまい申し訳ありませんでした。修正したスクリプトを回答へ追記しましたのでご確認頂けないでしょうか。これはサンプルのため、必要であればご自身の仕様に合わせて修正してください。

_af28_

2018/10/23 08:38

何度もご対応いただきありがとうございました。無事解決いたしました。またなにかあればよろしくお願い致します。

kisojin

2018/11/06 03:22 編集

返事が遅くなり申し訳ありません。無事解決してよかったです。