Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
UnderScoreとJSONを使用し、セレクトボックスとチェックボックスの絞り込み検索を作成しようと思っています。
下記を参考に作成したのですが、「gakusei」と「age」のような複数配列の場合の記述方法がわかりません。
https://teratail.com/questions/143434
検索方法は「gakusei」・「age」・「pref」のand検索です。
■html
<select id="gakusei" name="gakusei"> <option value="">-- 未選択 --</option> <option value="小学">小学</option> <option value="中学">中学</option> <option value="高校">高校</option> </select> <select id="age" name="age"> <option value="">-- 未選択 --</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> </select> <select id="pref" name="pref"> <option value="">-- 未選択 --</option> <option value="関東">関東</option> <option value="関西">関西</option> </select>
■JS
$(function() { function outputResults(results) { // 変数の初期化 var html = ''; // 受け取った配列をループで処理 // 出力するHTMLの整形 $.each(results, function() { html += '<div class="item">'; html += this.name; html += '</div>'; }); // HTMLに出力 $('#items').empty().append(html); } var items = [ { "gakusei" :[ "小学", "中学", ], "age" :[ "11", "12", "13", "14", "15", ], "pref" : "関東", }, { "gakusei" :[ "中学", "高校", ], "age" :[ "13", "14", "15", "16", "17", "18" ], "pref" : "関西", }, // ページ読み込み時はすべてのアイテムを出力する outputResults(items); // 検索が押された時の処理 $('#search').on('submit' , function(event){ // デフォルトのイベントをキャンセル event.preventDefault(); // 検索項目のオブジェクトを作成してセレクトボックスの値を格納 var query = {}; if($('#gakusei').val() != ''){ query.gakusei= $('#gakusei').val(); } if($('#age').val() != ''){ query.age= $('#age').val(); } if($('#sex').val() != ''){ query.sex = $('#sex').val(); } // データの中から一致するオブジェクトを検索 var results = _.filter(items, query ); console.log(results); // 返ってきた配列で出力処理 outputResults(results); }); });
例えば
"gakusei" :[ "小学", "中学", ],
が
"gakusei" :"小学",
だと表示されますが、複数だと検索結果が表示されません。
未熟なためどう記述すればよいのかわからないため、
どなたかご教示いただけますと幸いです。
よろしくお願いいたします。
回答1件
0
ベストアンサー
こんにちは
以下の(1),(2) の２点を追加、修正してみると、いかがでしょうか？
(1) itemsの要素であるitemが queryで与えられる条件に合致するかどうかを判定する関数を追加
以下のような関数（の入っている変数）を追加します。
javascript
1const matched = (item, { gakusei, age, pref }) => ( 2 item.gakusei.includes(gakusei) && item.age.includes(age) && item.pref === pref 3);
上記を追加する場所は、とりあえず分かりやすいところで、 $(function() { の直後にしておきます。
diff
1$(function() { 2+ 3+ const matched = (item, { gakusei, age, pref }) => ( 4+ item.gakusei.includes(gakusei) && item.age.includes(age) && item.pref === pref 5+ ); 6 7 function outputResults(results) {
(2) 上記で追加した matched を filter の第２引数で使用
filterする行を以下のように修正します。
diff
1- var results = _.filter(items, query ); 2+ var results = _.filter(items, item => matched(item, query));
以下は、上記のコードを動作確認するためのサンプルです。
ちなみに、JavaScriptが標準で提供するメソッドにも filter があるので、こちらを使うと以下のようにも書けます。
javascript
1var results = items.filter(item => matched(item, query));
以上、参考になれば幸いです。
投稿2020/04/27 18:36
総合スコア9058
お世話になっております。
ありがとうございます！
できました！
1点、よろしければご狂いただきたいのですが、
上記のセレクトボックスのほかに下記のようなチェックボックス項目が追加になった場合、
●チェックボックスをクリックで絞り込み表示・チェックがなければ非表示
<input type="checkbox" id="single" value="はい" name="single">
const matched = (item, { gakusei, age, pref }) => (
item.gakusei.includes(gakusei) && item.age.includes(age) && item.pref === pref
);
の部分と、
JSONの
↓追加
"single" : "", または "single" : "はい",
の部分の記述方法をご教示いただけませんでしょうか。
何卒よろしくお願いいたします。
こんな感じかなと思います。
・配列itemsの要素にプロパティ single を追加。これはBoolean値（ true または false ）にする。
・query にもプロパティ single を追加。これは文字列 "はい" または "" （空文字列）
上記のようにするとして、matched は以下のような感じになるでしょう。
https://codepen.io/jun68ykt/pen/JjYJWNb?editors=0012
ありがとうございます。
チェックボックスをチェックしない場合の絞り込み検索ができました。
私の伝え方が悪く大変申し訳ないのですが、チェックでさらに絞り込みではなく、追加で表示したいのですが、うまくいきません。
上記の内容を反映し、
queryに下記を追加で設定いたしました。
if ($('#single').prop('checked')) {
query.single = $('#single').val();
}else{
query.single = '';
}
例えば
gakusei：小学生,中学生,高校生
single：チェックした場合、でシングル家庭の情報を表示、しない場合非表示
1）gakusei で 小学生を選択・singleに非チェック
希望の結果：小学校の情報
2）gakusei で 小学生を選択・singleにチェック
希望の結果：小学校プラスシングル家庭の情報
現在、1）は希望通りにできており、2）がシングル家庭の情報のみ表示される状態です。
何度もお手数をおかけし申し訳ありませんが、ご教示いただけますと幸いです。
何卒よろしくお願いいたします。
なるほどです。
それだと、ひとつ前のコメントに書いたサンプルで使った matched 関数をちょっと修正すればよいでしょう。具体的には、以下のサンプルのように修正します。
https://codepen.io/jun68ykt/pen/eYpEMWr?editors=0012
なんどもありがとうございます。
下記のように修正したところ、singleにチェックがない場合も表示され、singleにチェックを入れるとsingleの情報が2重で表示されるようになりました。
const matched = (item, { sex, age, pref, single }) => (
(!sex || item.sex.includes(sex)) && (!age || item.age.includes(age)) && (!pref || item.pref.includes(pref)) || (item.single && single)
);
■query部分
var query = {};
if($('#pref').val() != ''){
query.pref = $('#pref').val();
}
if($('#age').val() != ''){
query.age = $('#age').val();
}
if($('#sex').val() != ''){
query.sex = $('#sex').val();
}
if ($('#single').prop('checked')) {
query.single = $('#single').val();
}else{
query.single = '';
}
singleにチェックがない場合は、他でマッチしていてもsingleの情報は非表示にしたいです。
何度も申し訳ございませんがご教示いただけますと幸いです。
何卒よろしくお願いいたします。
上記はまだ解決しておりませんが、もっと調べて勉強したいと思います。
なんどもご回答いただいたことに大変感謝しております。
ありがとうございました！
どういたしまして????
最後のご質問にはお応えできず、申し訳なかったです ????
> 上記はまだ解決しておりませんが、
一度、現状のUI（select だったりcheckbox など）の作りが、filterを使ったりする配列操作などのプログラムに、どのような仕様を求めているかを整理するのと、配列のメソッド（今回ではfilter)や &&、 || といった論理演算子についての理解と知識を点検したうえ、状況を整理して、本当に分かっていないことは何か？を詰めて、必要であれば、その本当に分かっていないことの確認や解決のために、新たにご質問をされるとよいかもしれません。Good luck を祈念申し上げます。
あなたの回答
tips
プレビュー
