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>
回答1件
あなたの回答
tips
プレビュー