GAS⇔HTML条件抽出表示

解決済

回答 2

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 2,813
whitedoragon

whitedoragon

score 10

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/ツールのバージョンなど）

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert3 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • defghi1977

    defghi1977

    2018/04/12 21:45

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/04/13 10:43

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

    キャンセル

  • whitedoragon

    whitedoragon

    2018/04/13 21:05

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

    キャンセル

回答 2 件

link

checkベストアンサー

+1

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

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

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

 GAS

for文は不要です。 

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

 HTML

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/13 21:35 編集

    お二人とも、この私のつたない質問に対しまして適格なアドバイスありがとうございました。
    今回の私の質問の仕方からわかるように
    私は、GAS（javascript)は過去に経験がなく、今現在の経験日数でいえば1か月くらいです。本当に基本のキの字もありません・・
    どこから学んでよいかも手探り状態で、自分のやりたいことと自身の能力にギャップがあることも重々承知しております。

    scriptの内容は、なんとなくうっすらと理解しつつも、他サイトからの情報（script記述の内容）を見よう見まねな（ツギハギみたいな）感じでやってきました。

    ちなみに、今回質問させていただきました事例ですが、stshishoさんの回答を参考にさせていただきまして作成しましたところ、実現できましたのでご報告させていただきます。
    また、基礎的なところはdefghi1977さんより学ばさせていただきました！
    （お恥ずかしながらインデントの意味すら知りませんでした・・検索して後で知りました。）
    お二人からいただきましたコードですが、内容の理解を深めていきつつ今後の参考にさせていただきます。
    このたびは、本当にありがとうございました！
    また何かありましたら宜しくお願いします。

    キャンセル

  • 2018/04/13 22:31

    解決できて何よりです。

    キャンセル

link

0

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

主だった問題点は2つ

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

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

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

<!--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 source = '';
      for(let i = 0, len = loginData.length; i < len; i++){
        var rowData = loginData[i];
        source += '<tr>';
        for(let j = 0, len = rowData.length; j < len; j++){
          source += '<td>' + rowData[j] + '</td>';
        }
        source += '</tr>';
      }
      $('loginRows').html(source);
    }
  </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>
      <tbody id="loginRows">
      <!--<tr id="loginTr"> </tr>-->
      </tbody>
    </table>
  </div>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る