Q&A
質問タグに「Google Apps Script」を追記してください。
前提・実現したいこと
利用ユーザの登録情報を検索・表示させるツールを作成しました。
登録情報はスプレッドシートにまとめられていますが、一覧開示が出来ないため、ユーザIDを入力することで該当の情報のみを表示させます。
該当データがHITした場合に情報を表示させることには成功したのですが、該当データがない場合に何かしらのメッセージを表示させたいのですが、どのようにすればよいでしょうか。
該当データの配列の個数をHTMLページに表示させる方法でも良いです。
Excelマクロ等は利用しておりますが、GASは初心者のため、本サイトなどを参考に切り貼りで作成いたしました。
ご教示いただけますと助かります。
発生している問題・エラーメッセージ
HTMLへデータを渡せない
該当のソースコード
◎GAS
var sheet = SpreadsheetApp.getActive().getSheetByName('シート1');
function doGet() {
var tpl = HtmlService.createTemplateFromFile('index');
return tpl.evaluate();
}
// 結果を返す
function getLoginData(key) {
var range = sheet.getRange("A:A").getValues();
var lastRow = range.filter(String).length;
var loginData = sheet.getRange(2, 1, lastRow, 3).getValues();
loginData = loginData.filter(function(v){return v[0] == key;});
Logger.log(loginData.indexOf(key))
return loginData;
}
◎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(); }); </script> <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> </head> <!--本体--> <body> <div id="container"> <h2>レポート検索</h2> <div class="form-inline text-center"> <div class="form-group"> <label for="namae">ユーザID：</label> <input type="text" id="service" name="service" size="30" maxlength="6"> </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>ユーザID</th> <th>登録名</th> <th>ログインURL</th> </tr> <tbody id="loginTr"> </tbody> </table> </div> </body> </html>試したこと
ログ上ではデータが正しく取得できていることを確認
htmlファイルに <?=loginData.length?> や <?=l?> を記載すると
「ReferenceError: 「l」が定義されていません。（行 5、ファイル「コード」）」
とエラーが出てしまう
GAS側で個数のみを取得するfunctionを別途作成したが上手く動作せず、ログにも値が取得出来ていなかった。
回答1件
0
ベストアンサー
「該当データがない場合」とは、Javascript側のdispLoginData(loginData)の配列loginDataの長さが0の場合と思われますので、次のような変更はいかがでしょうか。いろいろな方法があると思いますので、この修正はそれらのうちの一つとして考えてください。
修正案
From
javascript
1function dispLoginData(loginData) { 2var td = ''; 3for (var i = 0, l = loginData.length; i < l; i++) { 4var v = loginData[i]; 5td += '<tr>\n<td>' + v[0] + '</td>\n<td>' + v[1] + '</td>\n<td>' + v[2] + '</td>\n</tr>\n'; 6} 7$('#loginTr').html(td); 8}
To
javascript
1function dispLoginData(loginData) { 2 var td = ''; 3 if (loginData.length > 0) { // 追加 4 for (var i = 0, l = loginData.length; i < l; i++) { 5 var v = loginData[i]; 6 td += '<tr>\n<td>' + v[0] + '</td>\n<td>' + v[1] + '</td>\n<td>' + v[2] + '</td>\n</tr>\n'; 7 } 8 } else { 9 alert("見つからない場合のメッセージなど"); // 追加 10 $('#service').val(""); // 追加: ここで#serviceをクリアしています 11 } 12 $('#loginTr').html(td); 13}
追記
From
javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 2<script> 3var service = null; 4$(function() { 5$('#service').change(function() { 6service = $(this).val(); 7}).change(); 8}); 9</script> 10 11<script> 12function dispLoginData(loginData) { 13var td = ''; 14for (var i = 0, l = loginData.length; i < l; i++) { 15var v = loginData[i]; 16td += '<tr>\n<td>' + v[0] + '</td>\n<td>' + v[1] + '</td>\n<td>' + v[2] + '</td>\n</tr>\n'; 17} 18$('#loginTr').html(td); 19} 20</script> 21 22</head> 23<!--本体--> 24<body> 25<div id="container">
To:
javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 2 3<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <!-- 追加 --> 4<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- 追加 --> 5<script> 6var service = null; 7$(function() { 8 $('#dialog').dialog({autoOpen: false}); // 追加 9 $('#service').change(function() { 10 service = $(this).val(); 11 }).change(); 12}); 13 14function dispLoginData(loginData) { 15 var td = ''; 16 if (loginData.length > 0) { 17 for (var i = 0, l = loginData.length; i < l; i++) { 18 var v = loginData[i]; 19 td += '<tr>\n<td>' + v[0] + '</td>\n<td>' + v[1] + '</td>\n<td>' + v[2] + '</td>\n</tr>\n'; 20 } 21 } else { 22 $('#dialog').text("見つからない場合のメッセージ"); // 追加 23 $('#dialog').dialog('open'); // 追加 24 $('#service').val(""); // 追加 25 } 26 $('#loginTr').html(td); 27} 28</script> 29 30</head> 31<!--本体--> 32<body> 33<div id="dialog" title="サンプルタイトル"></div> <!-- 追加 --> 34<div id="container">
投稿2019/08/20 08:15
編集2019/08/21 03:27
総合スコア899
回答、ありがとうございます。
ご教授いただいた方法でアラートが出るようになりました。
メッセージの上部に
「～script.googleusercontent.comに埋め込まれているページの内容」
という表記が出てしまい、こちらの文字が大きく、
入力したメッセージよりも目立ってしまう印象でした。（メッセージが伝わらない）
これらはChromeが出しているため、消したり編集することは出来ない、というのをWeb上で見かけましたが、やはり消したり編集は出来ないのでしょうか。
ご返事ありがとうございます。いくつかある手段の中の一つとしてalertを提案させていただいたのですが、ご希望に沿わなかったようで大変申し訳ありません。jqueryを使用されているようですので、今の場合、jqueryでダイアログを出すのはいかがでしょうか。追記へ変更したスクリプトを記載させていただきます。ご確認をお願い致します。
度々、案をいただきましてありがとうございます。
ダイアログにて、希望の動作が実現することができました。
タイトル、サイズ、オプションのボタンなどが自由にカスタマイズでき、他でも応用ができそうです。
お忙しいところ丁寧に教えていただきまして、ありがとうございました。
ご返事ありがとうございます。解決したとのことで安心しました。
あなたの回答
tips
プレビュー
