チェックボックスを使った絞り込み機能について

お世話になります。

外部ファイルから取得した連想配列を元に、チェックボックスを使った絞り込み機能を実現したいです。

一つのキーを対象とした絞り込みには成功したのですが、ここから複数のキーを用いて、さらに絞り込みを行うにはどうすればいいのか頭を悩ませています。

何卒よろしくお願いいたします。

実現したいこと

selectedValuesに格納した値との比較で、characterに加えてageとgenderも対象にしたいです。

「deta.txt」

[
{"code": "1", "name": "山田", "age": "25", "gender": "man", "character": ["ハキハキ", "サバサバ", "努力家", "結果主義"]},
{"code": "2", "name": "本田", "age": "45", "gender": "man", "character": ["サバサバ", "", "怠け者", "快楽主義"]},
{"code": "3", "name": "田中", "age": "18", "gender": "woman", "character": ["おっとり", "努力家", "平和主義"]}
]

「test.php」

<style>
section{width: 500px;margin: auto;}
li{list-style-type: none;}
.human-list{
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
}	
.human-list.search li{display: none;}
.human-list.search li.hit{display: block;}	
</style>
	
<section>
<ul class="human-list">
	<li data-value="1">山田</li>
	<li data-value="2">本田</li>
	<li data-value="3">田中</li>
</ul>

<h2>年齢</h2>	
<ul class="selectItem">
	<li><label><input type="checkbox" class="partsCheck" data-value="18"><span><span>18歳</span></span></label></li>
	<li><label><input type="checkbox" class="partsCheck" data-value="25"><span><span>25歳</span></span></label></li>
	<li><label><input type="checkbox" class="partsCheck" data-value="45"><span><span>45歳</span></span></label></li>
</ul>

<h2>性別</h2>	
<ul class="selectItem">
	<li><label><input type="checkbox" class="partsCheck" data-value="man"><span><span>男性</span></span></label></li>
	<li><label><input type="checkbox" class="partsCheck" data-value="woman"><span><span>女性</span></span></label></li>
</ul>

<h2>普段の性格</h2>
<ul class="selectItem">
	<li><label><input type="checkbox" class="partsCheck" data-value="ハキハキ"><span><span>ハキハキ</span></span></label></li>
	<li><label><input type="checkbox" class="partsCheck" data-value="サバサバ"><span><span>サバサバ</span></span></label></li>
	<li><label><input type="checkbox" class="partsCheck" data-value="おっとり"><span><span>おっとり</span></span></label></li>
</ul>

<h2>仕事に対する姿勢</h2>
<ul class="selectItem">
	<li><label><input type="checkbox" class="partsCheck" data-value="努力家"><span><span>努力家</span></span></label></li>
	<li><label><input type="checkbox" class="partsCheck" data-value="怠け者"><span><span>怠け者</span></span></label></li>
</ul>

<h2>傾向</h2>
<ul class="selectItem">
	<li><label><input type="checkbox" class="partsCheck" data-value="結果主義"><span><span>結果主義</span></span></label></li>
	<li><label><input type="checkbox" class="partsCheck" data-value="快楽主義"><span><span>快楽主義</span></span></label></li>
	<li><label><input type="checkbox" class="partsCheck" data-value="平和主義"><span><span>平和主義</span></span></label></li>
</ul>
	
<p class="hit-num"></p>	
</section>
	
<?php
// ファイルのパス
$url = "deta.txt";
// ファイル内容を読み込む
$data = file_get_contents($url);
// JSON形式のデータを連想配列に変換
$arrayData = json_decode($data, true);
?>
	
<script>
// PHPから取得したデータをJavaScript変数に代入
var phpData = <?php echo json_encode($arrayData); ?>;

console.log(phpData);

// チェックボックスで選択された値を格納するための配列
var selectedValues = [];

// HTMLコンテンツが読み込まれた後に処理を実行する
document.addEventListener('DOMContentLoaded', function () {
    // チェックボックス要素を取得
    var checkboxes = document.querySelectorAll('.partsCheck');

    // ul要素内のli要素を取得
    var listItems = document.querySelectorAll('ul.human-list li');

    // ヒット件数を表示するためのdiv要素を取得
    var hitNumElement = document.querySelector('.hit-num');

    // チェックボックスの変更イベントにリスナーを追加
    checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            // チェックされたチェックボックスのdata-valueデータ属性を取得
            var dataValue = checkbox.dataset.value;

            // チェックされている場合はdata-valueを配列に追加、そうでない場合は配列から削除
            if (checkbox.checked) {
                selectedValues.push(dataValue);
            } else {
                var index = selectedValues.indexOf(dataValue);
                if (index !== -1) {
                    selectedValues.splice(index, 1);
                }
            }

            // チェックが全て外れた場合はselectedValuesを空にし、クラス名「search」を削除
            if (selectedValues.length === 0) {
                listItems.forEach(function (item) {
                    item.classList.remove('hit');
                });
                document.querySelector('ul.human-list').classList.remove('search');

                // ヒット件数を削除
                hitNumElement.textContent = '';
            } else {
                // 全てのli要素に対して処理を実行
                var hitCount = 0;
                listItems.forEach(function (item) {
                    // li要素のdata-valueデータ属性を取得
                    var value = item.dataset.value;

                    // リストアイテムのcodeと選択されたデータの一致を確認し、一致した場合は"hit"クラスを追加
                    if (selectedValues.every(val => phpData.find(entry => entry.code === value && entry.character.includes(val)))) {
                        item.classList.add('hit');
                        hitCount++;
                    } else {
                        item.classList.remove('hit');
                    }
                });

                // チェックがついている場合はクラス名「search」を追加
                document.querySelector('ul.human-list').classList.add('search');

                // ヒット件数を表示
                hitNumElement.textContent = 'ヒット件数: ' + hitCount;
            }
        });
    });
});
</script>

行動規範の内容に同意します

回答1件

自己解決

すみません。自己解決しました。


<?php
// ファイルのパス
$url = "deta.txt";
// ファイル内容を読み込む
$data = file_get_contents($url);
// JSON形式のデータを連想配列に変換
$arrayData = json_decode($data, true);
?>

<script>
// PHPから取得したデータをJavaScript変数に代入
var phpData = <?php echo json_encode($arrayData); ?>;

console.log(phpData);

// チェックボックスで選択された値を格納するための配列
var selectedValues = [];

// HTMLコンテンツが読み込まれた後に処理を実行する
document.addEventListener('DOMContentLoaded', function () {
    // チェックボックス要素を取得
    var checkboxes = document.querySelectorAll('.partsCheck');

    // ul要素内のli要素を取得
    var listItems = document.querySelectorAll('ul.human-list li');

    // ヒット件数を表示するためのdiv要素を取得
    var hitNumElement = document.querySelector('.hit-num');

    // チェックボックスの変更イベントにリスナーを追加
    checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            // チェックされたチェックボックスのdata-valueデータ属性を取得
            var dataValue = checkbox.dataset.value;

            // チェックされている場合はdata-valueを配列に追加、そうでない場合は配列から削除
            if (checkbox.checked) {
                selectedValues.push(dataValue);
            } else {
                var index = selectedValues.indexOf(dataValue);
                if (index !== -1) {
                    selectedValues.splice(index, 1);
                }
            }

            // チェックが全て外れた場合はselectedValuesを空にし、クラス名「search」を削除
            if (selectedValues.length === 0) {
                listItems.forEach(function (item) {
                    item.classList.remove('hit');
                });
                document.querySelector('ul.human-list').classList.remove('search');

                // ヒット件数を削除
                hitNumElement.textContent = '';
            } else {
                // 全てのli要素に対して処理を実行
                var hitCount = 0;
                listItems.forEach(function (item) {
                    // li要素のdata-valueデータ属性を取得
                    var value = item.dataset.value;

                    // リストアイテムのcodeと選択されたデータの一致を確認し、一致した場合は"hit"クラスを追加
                    if (selectedValues.every(val => phpData.find(entry => entry.code === value && (entry.character.includes(val) || entry.age === val || entry.gender === val)))) {
                        item.classList.add('hit');
                        hitCount++;
                    } else {
                        item.classList.remove('hit');
                    }
                });

                // チェックがついている場合はクラス名「search」を追加
                document.querySelector('ul.human-list').classList.add('search');

                // ヒット件数を表示
                hitNumElement.textContent = 'ヒット件数: ' + hitCount;
            }
        });
    });
});
</script>

投稿2023/12/17 22:37

honda_ta

総合スコア14