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

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

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

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

JavaScript

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

Q&A

解決済

1回答

1391閲覧

JavaScript: ラジオボタンのvalueによって、表示されるJSONデータを変更したい

vankick

総合スコア22

JSON

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

JavaScript

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

0グッド

0クリップ

投稿2019/04/25 07:33

JavaScriptで、ラジオボタンのvalueによって、表示されるJSONデータを変更したいです。

現在は、初期状態ですべてのJSONデータが表示されるようになっています。
json.map((item) => { の部分で書き出しています。

フィルターしたデータは const filteredItem = json.filter(function(item) { で書き出しており、consoleには、フィルターした結果が表示されています。
(ただし、SかつShirt、のような、2段階フィルターは出来ていません。)

これを、consoleにではなく、実際のHTMLに反映させたいのですが、ロジックが分からず、先に進めずにいます。

どなたかお力を貸していただけないでしょうか。

async function asyncTest() { const res = await fetch('src/scripts/fashion.json'); const json = await res.json(); const itemContainer = document.querySelector('.products'); json.map((item) => { const str = ` <li> <div class="image_container"><img src="src/data/images/${item.image}"></div> <p class="product_name">${item.name}</p> <p class="price">${item.price}</p> <p>Size: ${item.size}</p> <p>Category: ${item.category}</p> </li> `; itemContainer.insertAdjacentHTML('beforeend', str); }) const radioBtn = document.querySelector('.sidebar ul.category_list'); radioBtn.addEventListener('change', function(event) { const filterValue = event.target.value; const filterName = event.target.name; const filteredItem = json.filter(function(item) { if (item.category == filterValue) { return true; } else if(item.size == filterValue) { return true; } } ); console.log("Filtered", filteredItem); // itemContainer.insertAdjacentHTML('beforeend', str); }); } asyncTest();
<div class="wrapper"> <div class="sidebar"> <ul class="category_list"> <li> <ul> <li><input type="radio" name="category" value="shirt">Shirts</li> <li><input type="radio" name="category" value="pants">Pants</li> <li><input type="radio" name="category" value="skirt">Skirt</li> <li><input type="radio" name="category" value="jacket">Jacket</li> </ul> </li> <li> <ul> <li><input type="radio" name="size" value="S" id=""/>S</li> <li><input type="radio" name="size" value="M" id=""/>M</li> <li><input type="radio" name="size" value="L" id=""/>L</li> </ul> </li> </ul> </div> <main> <ul class="products"></ul> </main> </div>

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

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

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

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

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

yambejp

2019/04/25 07:54

JSONデータのサンプルが無いと・・・
vankick

2019/04/25 08:33

ありがとうございます。次回からは必要な情報はすべて掲載するようにします。
guest

回答1

0

ベストアンサー

うーん、ほとんどできていると思うのですが。
const itemContainer ~ json.map((item) を別の function にする。

JavaScript

1function rewrite(json) { 2 const itemContainer = document.querySelector('.products'); 3 4 // クリア処理追加。 5 itemContainer.innerHTML = ''; 6 7 json.map((item) => { 8 const str = ` 9 <li> 10 <div class="image_container"><img src="src/data/images/${item.image}"></div> 11 <p class="product_name">${item.name}</p> 12 <p class="price">${item.price}</p> 13 <p>Size: ${item.size}</p> 14 <p>Category: ${item.category}</p> 15 </li> 16 `; 17 itemContainer.insertAdjacentHTML('beforeend', str); 18 }); 19}

そして呼ぶだけ。

JavaScript

1rewrite(filteredItem);

投稿2019/04/25 07:54

x_x

総合スコア13749

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

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

vankick

2019/04/25 08:32

思う通りの結果が得られました、ありがとうございます! 別のfunctionを作るという考えはあったのですが上手くいかず、その上、フィルターしたオブジェクトをargumentとして通すという発想が全くありませんでした。非常に勉強になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問