フィルタ機能のボタンを別のページに設置

Question

実現したいこと

フィルタ機能のボタンを別のページに設置したいです。
Aページのボタンをクリックすると、Bページに移動してBページの中にあるリストを絞り込み表示させる。
Bページのリストはjsonファイルからリストを作成しています。
html やcssはある程度分かるようになりましたが、javascriptは勉強中です。

    <form method="get" action="indexB.html">
        <button name="x" value="近畿">近畿</button>
        <button name="y" value="関東">関東</button>
        <button name="z" value="中部">中部</button>
   </form>

    <button id="btnKinki">近畿</button>
    <button id="btnKantoh">関東</button>
    <button id="btnChubu">中部</button>
    <div>console.logに表示</div>
    <script>
        function getUrlParam(param) {
            var pageUrl = window.location.search.substring(1);
            var urlVar = pageUrl.split('&');
            for (var i = 0; i < urlVar.length; i++) {
                var paramName = urlVar[i].split('=');
                if (paramName[0] == param) {
                    return decodeURI(paramName[1]);
                }
            }
        };
let url = "C.json";
        let btn = document.querySelector("#btnKinki");
        btn.addEventListener("click", (e) => {
            fetch(url)
                .then((response) => {
                    return response.json();
                })
                .then((data) => {
                    var newLines = data.filter((item, index) => {
                        if (item.area.indexOf("近畿") >= 0) return true;
                    });
                    console.log("近畿", newLines);
                });
        });
    </script>

[
  {
    "name": "京都",
    "area": "近畿",
    "airport": [""],
    "hp": "https://www.pref.kyoto.jp/"
  },
  {
    "name": "滋賀",
    "area": "近畿",
    "airport": [""],
    "hp": "https://www.pref.shiga.lg.jp/"
  },
  {
    "name": "大阪",
  "area": "近畿",
    "airport": ["大阪国際空港","関西国際空港"],
    "hp": "https://www.pref.osaka.lg.jp/"
  },
  {
    "name": "東京",
 "area": "関東",
    "airport": ["羽田空港","八丈島空港","大島空港","新島空港","三宅島空港","神津島空港","調布飛行場"],
    "hp": "https://www.metro.tokyo.lg.jp/"
  },
  {
    "name": "埼玉",
    "area": "関東",
    "airport": [""],
    "hp": "https://www.pref.saitama.lg.jp/"
  },
   {
    "name": "静岡",
   "area": "中部",
    "airport": ["静岡空港"],
    "hp": "https://www.pref.shizuoka.jp/"
  }
]

Comments

[int32_t]

質問はなんでしょうか？ 現在のコードでどういう問題があるのですか。

[cocoyoko]

質問が分かりにくくて申し訳ないです。
絞り込みボタンを設置して、クリックすると別のページに結果が表示されるようにしたいのですが、この質問の書き方は分かりにくいんですね。

Answer 1

bでbtnのcliockイベントを拾ってもボタンを押しているわけではないので反応しません
getUrlParamで前のページで選ばれたパラメータが検査できるのでそれをもとにjsonを呼び出してください
aのボタンも別々のnameではなく同じものにした方が処理はしやすいでしょう

参考

a.html

<form method="get" action="b.html">
        <button name="x" value="近畿" type="submit">近畿</button>
        <button name="x" value="関東" type="submit">関東</button>
        <button name="x" value="中部" type="submit">中部</button>
</form>

b.html

<script>
const view=async(area)=>{
  const url = "c.json";
  const newLines=await fetch(url)
    .then(res=>res.json())
    .then(data=>data.filter(x=>x.area==area));
  console.dir(area,newLines);
}
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.matches('.btn')){
    const area=t.textContent;
    view(area);
  }
});
window.addEventListener('DOMContentLoaded', ()=>{
  const param="x";
  const area=new URLSearchParams(location.search.substr(1)).get(param);
  view(area);
});
</script>
<button class="btn">近畿</button>
<button class="btn">関東</button>
<button class="btn">中部</button>

Comments

[cocoyoko]

とても勉強になりました。
書籍で勉強しているのですが、実際に書くのは難しくて困っていました。
ありがとうございました！