GAS⇔HTML条件抽出表示

GASにてHTML内のテキストボックスに店コードを入れて、スプレッドシートに記載されている
内容から検索・その抽出結果をHTMLへ全て表示させたいです。

該当する条件でヒットする内容を一つ（一行分）だけなら表示させることができるのですが
複数表示させる（table・罫線付き表表示）にはどのようにすればよいのでしょうか。

GASは初心者なのでご教示いただけますと助かります。

【データ.gs】

var sheet = SpreadsheetApp.getActive().getSheetByName('発注案内');
function doGet() {
  var tpl = HtmlService.createTemplateFromFile('index.html');
  return tpl.evaluate();
}

// 結果を返す
function getLoginData(key) {
  var range = sheet.getRange("A:A").getValues();　
  var lastRow = range.filter(String).length;

  for(var i = 2;i < lastRow;i++){
    //テキスト入力店コードのみ抽出 
    var val = sheet.getRange(i, 1).getValue();    
    if ( val == key ) {
    　//配列変数として格納
      if (loginData == undefined) {
        loginData = [];
    }　　　 
      var loginData = sheet.getRange(i, 1, 1, 3).getValues(); 
      Logger.log(loginData);
      return loginData[0]; 
}
}
}

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>スプレッド読込みテスト</title>
  <!--クライアントスクリプト-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    var service = null;
        $(function() {
          $('#service').change(function() {
            service = $(this).val();
          }).change();
        });
        
        function dispLoginData(loginData) { // スプレッドシートから取得した情報を元にテーブルを構成
          var td = '';
             for (var i in loginData) { 
              td += '<td>' + loginData[i] + '</td>';        
            }  
          $('#loginTr').html(td);
        }
  </script>
</head>
<!--本体-->
<body>
  <div id="container"> 
    <h2>発注案内</h2> 
    <div class="form-inline text-center"> 
      <div class="form-group"> <label for="namae">店コード：</label> 　　<input type="text" id="service" name="service" size="30" maxlength="5"> 　　　</div>
      <div class="form-group"> <input type="button" class="btn btn-success" value="照会" onclick="google.script.run.withSuccessHandler(dispLoginData).getLoginData(service)"> </div>
    </div> <br>
    <table class="table table-bordered table-striped">
      <tr>
        <th>店コード</th>
        <th>店舗名</th>
        <th>入荷数</th>
      </tr>
      <tr id="loginTr"> </tr>
    </table>
  </div>
</body>
</html>

上記のソースですと、該当するものが一つ（一行分）しか抽出・HTMLへ表示できません。
おそらく後へ後へと変数が書き替えられたためかと思われます。

試したこと

店コードに対して該当する箇所が全て変数へ格納されているか確認するため
ログ出力をしましたが
GAS箇所にて「return loginData[0];」をコメントアウトにして
「Logger.log(loginData);」のみにして出力しましたところ
該当する複数行がログ出力されるのですが
コメントアウトを解除（return loginData[0]; を有効）すると
一つ（1行分）しかログ出力されませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

defghi1977

2018/04/12 12:45

ソースコードは「```」で囲って整形して下さい.

退会済みユーザー

2018/04/13 01:43

初心者申請はしたほうが良いでしょう。あと、タグにGoogle Apps Scriptも追加したほうが良いでしょう。

whitedoragon

2018/04/13 12:05

アドバイスありがとうございます！今回、どうしてもわからないところがありまして探していましたところ、このサイトにたどりつきました。ワラにもすがる思いだったので何も知らないまま質問させていただきました。大変申し訳ありませんでした。次回より初心者マークを付けて質問させていただきます。

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

回答2件

ベストアンサー

ロジックに無駄が多いのは別として、基本的にはdefghi1977さんのご指摘どおりです。
更に細かく列挙すると以下のようになります。

for文中でloginDataを上書きしている　var loginData = sheet.getRange(i, 1, 1, 3).getValues();
returnの記述位置とは別に、そもそもreturn loginData[0];では二次元配列の先頭要素しか返していない（スプレッドシートで言えば１行分のみ）

その上でGAS及びHTMLの修正をしたサンプルになります。

GAS

for文は不要です。

javascript
1function getLoginData(key){
2   /*省略*/
3   var loginData = sheet.getRange(2, 1, lastRow, 3).getValues();//２～lastRow行目、３列分を二次元配列として取得
4   loginData = loginData.filter(function(v){return v[0] == key;});//入力店コードデータのみ抽出
5   return loginData;
6}

HTML

for文中で３列分を一括挿入

html
1<!-- 省略 -->
2<script>
3   function dispLoginData(loginData) { // スプレッドシートから取得した情報を元にテーブルを構成
4      var td = '';
5      for (var i = 0, l = loginData.length; i < l; i++) {
6         var v = loginData[i];
7         td += '<tr>\n<td>' + v[0] + '</td>\n<td>' + v[1] + '</td>\n<td>' + v[2] + '</td>\n</tr>\n';
8      }
9      $('#loginTr').html(td);
10   }
11</script>
12<!-- 省略 -->
13<tbody id="loginTr">
14<!--<tr id="loginTr"> </tr>-->
15</tbody>
16<!-- 省略 -->

なお、動作確認等はしておりませんので、参考まで。

投稿2018/04/13 01:41

退会済みユーザー

総合スコア0

whitedoragon

2018/04/13 12:42 編集

お二人とも、この私のつたない質問に対しまして適格なアドバイスありがとうございました。今回の私の質問の仕方からわかるように私は、GAS（javascript)は過去に経験がなく、今現在の経験日数でいえば1か月くらいです。本当に基本のキの字もありません・・どこから学んでよいかも手探り状態で、自分のやりたいことと自身の能力にギャップがあることも重々承知しております。 scriptの内容は、なんとなくうっすらと理解しつつも、他サイトからの情報（script記述の内容）を見よう見まねな（ツギハギみたいな）感じでやってきました。ちなみに、今回質問させていただきました事例ですが、stshishoさんの回答を参考にさせていただきまして作成しましたところ、実現できましたのでご報告させていただきます。また、基礎的なところはdefghi1977さんより学ばさせていただきました！（お恥ずかしながらインデントの意味すら知りませんでした・・検索して後で知りました。）お二人からいただきましたコードですが、内容の理解を深めていきつつ今後の参考にさせていただきます。このたびは、本当にありがとうございました！また何かありましたら宜しくお願いします。

退会済みユーザー

2018/04/13 13:31

解決できて何よりです。

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

NOTE:
まず断っておくと, 回答者はGoogle Apps Scriptを知りません. 単なるJavaScriptとして考えます.
また, 私の環境からは動作検証ができませんから, エラーが発生した場合はご自身で修正なさって下さい.

主だった問題点は2つ

1つめ
コードのインデントが狂っておりreturn文の位置がおかしい.ループを抜けてからreturnすべきである.
また, コードの構造を見るこうすべきであろう.

JavaScript
1//GAS
2function getLoginData(key) {
3  var range = sheet.getRange("A:A").getValues();　
4  var lastRow = range.filter(String).length;
5  var loginData = [];
6  for(var i = 2;i < lastRow;i++){
7    //テキスト入力店コードのみ抽出 
8    var val = sheet.getRange(i, 1).getValue();    
9    if ( val == key ) {
10      loginData.push(sheet.getRange(i, 1, 1, 3).getValues());
11    }
12  }
13  return loginData;
14}

2つめ
配列はfor-inで回してはならない.
データは配列の配列（テーブル構造）をしているので, 複数のtr要素が生成されるようforループは2重になるはずだ.
またtrを挿入するのはtbody要素なので, テーブルの構造も修正する必要がある.

HTML
1<!--index.html-->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <title>スプレッド読込みテスト</title>
6  <!--クライアントスクリプト-->
7  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
9  <script>
10    var service = null;
11    $(function() {
12      $('#service').change(function() {
13        service = $(this).val();
14       }).change();
15    });
16
17    function dispLoginData(loginData) {
18      var source = '';
19      for(let i = 0, len = loginData.length; i < len; i++){
20        var rowData = loginData[i];
21        source += '<tr>';
22        for(let j = 0, len = rowData.length; j < len; j++){
23          source += '<td>' + rowData[j] + '</td>';
24        }
25        source += '</tr>';
26      }
27      $('loginRows').html(source);
28    }
29  </script>
30</head>
31<!--本体-->
32<body>
33  <div id="container"> 
34    <h2>発注案内</h2> 
35    <div class="form-inline text-center"> 
36      <div class="form-group"> <label for="namae">店コード：</label> 　　<input type="text" id="service" name="service" size="30" maxlength="5"> 　　　</div>
37      <div class="form-group"> <input type="button" class="btn btn-success" value="照会" onclick="google.script.run.withSuccessHandler(dispLoginData).getLoginData(service)"> </div>
38    </div> <br>
39    <table class="table table-bordered table-striped">
40      <tr>
41        <th>店コード</th>
42        <th>店舗名</th>
43        <th>入荷数</th>
44      </tr>
45      <tbody id="loginRows">
46      <!--<tr id="loginTr"> </tr>-->
47      </tbody>
48    </table>
49  </div>
50</body>
51</html>