javascriptの検索で利用した配列のデータを、検索機能なしの単独ページでも表示させたい。

Question

前提・実現したいこと

下記ページを参考にさせていただき、検索ページを作成しました。
https://www.wan55.co.jp/column/detail/id=447

それとは別に、上記の配列（tag）に入っているものを利用し、
・「哺乳類」だけの単独ページ、
・1.「かわいい」と2.「かっこいい」の単独ページに2種表示させるページ
をそれぞれ検索機能なしで表示させたいと思っています。

同じ配列を使って行いたいのですが、なかなかうまくいきません。
詳しい方ご教示いただけますと幸いです。

発生している問題・エラーメッセージ

該当のソースコード

配列例）
var allList = [
    {
        id: "id001",
        life: 14,
        title: "猫",
        tag: ["哺乳類", "かわいい", "かっこいい"],
        description: "猫様は何をしても許されます。猫様にあやかりましょう。目指せ閲覧数アップ。"
    }, 
    {
        id: "id002",
        life: 36,
        title: "ハシビロコウ",
        tag: ["鳥類", "かっこいい", "こわい", "うごかない"],
        description: "（以下Wikipediaより）ペリカン目ハシビロコウ科の鳥類の一種である。 本種のみでハシビロコウ科を形成する（1属1種）。"
    },
 ・・・・・・・・・・・・・
];    

試したこと

配列のjsのみにして、js実行ファイルを変えてみようとしたり、
単独のページの読み込みの際にチェックボックスにチェックが入る様にし、display:noneで非表示にしてみたりしましたが、
うまくいきません。

補足情報（FW/ツールのバージョンなど）

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[maeh]

早速ありがとうございます。
初めての質問で、うまく表現出来ずにすみません。

[kei344]

（質問文は編集できます）下記記事を読んで、質問文を編集することをお勧めします。

【質問するときのヒント｜teratail（テラテイル）】
https://teratail.com/help/question-tips#questionTips2-1

[maeh]

すみません、色々と試したのですがうまくいかず、、、
例えば下記のページで使っている配列、「哺乳類」だけが初めから表示されているページを作りたいだけなのです。
https://www.wan55.co.jp/files/user/column/column447/

[miyabi_pudding]

その"試した"コードを記載してほしいのです。
試したということは、JavaScriptコードなり、HTMLコードなりがあるはずですよね？
それをできる限り全て質問文に記載してください。
kei344さんのおっしゃる通り、質問文は修正できます。

Answer 1

データをanimal.json的な名前で保存し
各ページでajaxで読み込みながら条件を利用して絞り込むだけです
絞り込み方はリンクしていただた参考サイトに記載のとおり

Comments

[maeh]

ありがとうございます！
jsonをjsファイルに読み込む方法がうまくいきませんでした。。。
animal.jsonでの配列を「var=allList」に読み込む書き方はどうなりますでしょうか？

Answer 2

変更箇所を少なくしたいのであれば、入力欄を非表示にしたうえで .trigger()

function init() {
    $(".filter_life select").on("change", onFilterChange);
    $(".filter_tag input").on("change", onFilterChange);
    $(".filter_keyword button").on("click", onFilterChange);
 
    //refleshHtml(allList);
    $('#chk05').prop('checked', true).trigger('change'); // かわいい
}

https://api.jquery.com/trigger/

Comments

[maeh]

ありがとうございます！
こちらの方法で表示確認できましたが、この「かわいい」が表示のページ以外にも、「哺乳類andかっこいい」が表示のページを作成したいとき、追加した一文の前後でif or swich文で読み込むページによって分岐させたいです。
ページの何かを取得して、分岐させることは可能でしょうか？
----------------------------------------------------
swich
　case （かわいいを表示したいページを読み込んだ時）{
　　$('#chk05').prop('checked', true).trigger('change'); // かわいい
　}
　case （哺乳類 and かっこいいを表示したいページを読み込んだ時）{
　　$('#chk01','#chk06').prop('checked', true).trigger('change'); // 哺乳類 and かっこいい
　}
----------------------------------------------------

[x_x]

チェック状態を変更したうえでonFilterChangeが呼ばれればよいので、
チェックしたい<input>にchecked属性をつけて、onFilterChangeを呼べばいいです。($('#chk05').prop('checked', true).trigger('change'); の代わりに onFilterChange();)
一度作れば HTML の変更だけで済むでしょう。

[maeh]

ご回答に気が付かずすみませんでした。
こちらでやりたいことができました！！！
本当にありがとうございました＾＾

そして度々申し訳ございませんが、こちらを使ってもう一つ質問です。
この「哺乳類 and かっこいいを表示したいページを読み込んだ時」の表示方法を、
idで表示を分けるときはどこで分岐させるべきでしょうか？
またchecked属性もどう選択すべきでしょうか？
-------------------------------------------------
<h2>哺乳類一覧</h2>
<div class="resultArea" id="honyurui">
　<div class="productArea_01">
　　哺乳類の配列のみを表示
　</div>
</div>

<h2>かっこいい一覧</h2>
<div class="resultArea" id="kakkoii">
　<div class="productArea_02">
　　かっこいいの配列のみを表示
　</div>
</div>
-------------------------------------------------
お手数をお掛けして申し訳ございませんが教えてください。