JavaScriptでデータを絞り込んで表示させたい
例えば各ステータスで絞り込んだデータを画面遷移せずに画面に表示させたい場合
LaravelとJavaScriptで実装したパターンとHTMLとJavaScriptで実装したパターンを載せます。
LaravelとJavaScript
Laravelの書き方だとCodePenで動かないのでそのままこちらに載せます。
<div> <label> {!! Form::radio('check_status', 0, true, ['onchange' => 'check_status()']) !!} <i class="icon"></i>すべて </label> <label> {!! Form::radio('check_status', 10, false, ['onchange' => 'check_status()']) !!} <i class="icon"></i>合格 </label> <label> {!! Form::radio('check_status', 20, false, ['onchange' => 'check_status()']) !!} <i class="icon"></i>不合格 </label> </div> <div id="show"> {{-- ※ここに絞り込んだデータが表示される --}} </div>
<script>
function check_status() {
var checkStatus = document.getElementsByName("check_status");
// データの取得
var students = @json($students);
// ラジオボタンでデータ絞込み
if (checkStatus[0].checked) { // すべて
var studentList = students.data;
ArrayByJson(studentList);
} else if (checkStatus[1].checked) { // 合格
var statusId=checkStatus[1].value;
var studentList = students.data.filter(function(x) {
return x.status == statusId;
});
ArrayByJson(studentList);
} else if (checkStatus[2].checked) { // 不合格
var statusId=checkStatus[2].value;
var studentList = students.data.filter(function(x) {
return x.status == statusId;
});
ArrayByJson(studentList);
}
}
// データ表示
function ArrayByJson(studentList){
clear();
for(var i = 0; i < studentList.length; i++){
document.getElementById('show').insertAdjacentHTML('beforeend', studentList[i].user.last_name + '<br>');
}
}
// 表示されたデータの初期化
function clear(){
document.getElementById('show').textContent = '';
}
</script>
HTMLとJavaScript
以下のデータを絞り込みます。
var students = [ {id:1, name:"yamada", status:10}, {id:2, name:"tanaka", status:30}, {id:3, name:"saitou", status:20}, ];
See the Pen check_box by ひややっこ (@to_fu) on CodePen.
