質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

601閲覧

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

cocoyoko

総合スコア1

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/03/12 14:13

実現したいこと

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

A.html

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

B.html

1 <button id="btnKinki">近畿</button> 2 <button id="btnKantoh">関東</button> 3 <button id="btnChubu">中部</button> 4 <div>console.logに表示</div> 5 <script> 6 function getUrlParam(param) { 7 var pageUrl = window.location.search.substring(1); 8 var urlVar = pageUrl.split('&'); 9 for (var i = 0; i < urlVar.length; i++) { 10 var paramName = urlVar[i].split('='); 11 if (paramName[0] == param) { 12 return decodeURI(paramName[1]); 13 } 14 } 15 }; 16let url = "C.json"; 17 let btn = document.querySelector("#btnKinki"); 18 btn.addEventListener("click", (e) => { 19 fetch(url) 20 .then((response) => { 21 return response.json(); 22 }) 23 .then((data) => { 24 var newLines = data.filter((item, index) => { 25 if (item.area.indexOf("近畿") >= 0) return true; 26 }); 27 console.log("近畿", newLines); 28 }); 29 }); 30 </script>

C.json

1[ 2 { 3 "name": "京都", 4 "area": "近畿", 5 "airport": [""], 6 "hp": "https://www.pref.kyoto.jp/" 7 }, 8 { 9 "name": "滋賀", 10 "area": "近畿", 11 "airport": [""], 12 "hp": "https://www.pref.shiga.lg.jp/" 13 }, 14 { 15 "name": "大阪", 16 "area": "近畿", 17 "airport": ["大阪国際空港","関西国際空港"], 18 "hp": "https://www.pref.osaka.lg.jp/" 19 }, 20 { 21 "name": "東京", 22 "area": "関東", 23 "airport": ["羽田空港","八丈島空港","大島空港","新島空港","三宅島空港","神津島空港","調布飛行場"], 24 "hp": "https://www.metro.tokyo.lg.jp/" 25 }, 26 { 27 "name": "埼玉", 28 "area": "関東", 29 "airport": [""], 30 "hp": "https://www.pref.saitama.lg.jp/" 31 }, 32 { 33 "name": "静岡", 34 "area": "中部", 35 "airport": ["静岡空港"], 36 "hp": "https://www.pref.shizuoka.jp/" 37 } 38]

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2023/03/12 21:47

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

2023/03/14 23:09

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

回答1

0

ベストアンサー

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

参考

a.html

html

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

b.html

javascript

1<script> 2const view=async(area)=>{ 3 const url = "c.json"; 4 const newLines=await fetch(url) 5 .then(res=>res.json()) 6 .then(data=>data.filter(x=>x.area==area)); 7 console.dir(area,newLines); 8} 9document.addEventListener('click',e=>{ 10 const t=e.target; 11 if(t.matches('.btn')){ 12 const area=t.textContent; 13 view(area); 14 } 15}); 16window.addEventListener('DOMContentLoaded', ()=>{ 17 const param="x"; 18 const area=new URLSearchParams(location.search.substr(1)).get(param); 19 view(area); 20}); 21</script> 22<button class="btn">近畿</button> 23<button class="btn">関東</button> 24<button class="btn">中部</button>

投稿2023/03/13 00:35

編集2023/03/13 01:16
yambejp

総合スコア115275

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cocoyoko

2023/03/14 23:03

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問