GAS⇔HTML条件抽出表示
- 評価
- クリップ 0
- VIEW 1,426
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
ロジックに無駄が多いのは別として、基本的にはdefghi1977さんのご指摘どおりです。
更に細かく列挙すると以下のようになります。
- for文中でloginDataを上書きしている
var loginData = sheet.getRange(i, 1, 1, 3).getValues();
- returnの記述位置とは別に、そもそも
return loginData[0];
では二次元配列の先頭要素しか返していない(スプレッドシートで言えば1行分のみ)
その上でGAS及びHTMLの修正をしたサンプルになります。
GAS
for文は不要です。
function getLoginData(key){
/*省略*/
var loginData = sheet.getRange(2, 1, lastRow, 3).getValues();//2~lastRow行目、3列分を二次元配列として取得
loginData = loginData.filter(function(v){return v[0] == key;});//入力店コードデータのみ抽出
return loginData;
}
HTML
for文中で3列分を一括挿入
<!-- 省略 -->
<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>
<!-- 省略 -->
なお、動作確認等はしておりませんので、参考まで。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
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.36%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
defghi1977
2018/04/12 21:45
ソースコードは「```」で囲って整形して下さい.
退会済みユーザー
2018/04/13 10:43
初心者申請はしたほうが良いでしょう。あと、タグにGoogle Apps Scriptも追加したほうが良いでしょう。
whitedoragon
2018/04/13 21:05
アドバイスありがとうございます!今回、どうしてもわからないところがありまして探していましたところ、このサイトにたどりつきました。ワラにもすがる思いだったので何も知らないまま質問させていただきました。大変申し訳ありませんでした。次回より初心者マークを付けて質問させていただきます。