Mi HTML:
<body> <form name="slectMovie"> IMDb rating: <button type="submit" value="Select">Select</button> </form> <script src="script.js"></script> </body>Mi JS:
const getData = async () => { try { const res = await fetch("http://134.209.87.8:1337/api/movies"); const data = await res.json(); console.log(data); const imdbSelect = document.createElement("select"); document.querySelector("form").append(imdbSelect); if (data.data.length > 0) { const IMDbRating = [ ...new Set(data.data.map((x) => x.attributes.IMDbRating)), ]; IMDbRating.forEach((category) => { const option = document.createElement("option"); option.textContent = category; imdbSelect.append(option); }); } } catch (err) { console.log(err); } }; getData();Tengo una selección, que es la calificación de la película, que obtengo de la API creada y agrego valores de opción de la API.
Me gustaría saber cómo muestro elementos debajo del formulario que solo se seleccionan en la etiqueta de selección.
Por ejemplo, si elijo la primera opción, me gustaría mostrar elementos debajo del formulario que solo coincidan con ese criterio, si elijo otra opción para mostrar solo los elementos que tienen ese criterio de opción.
hay muchas maneras de lograr esto. a continuación se muestra uno de estos.
En The html, agregue una nueva línea para mostrar los elementos.
<form name="slectMovie"> IMDb rating: <button type="submit" value="Select">Select</button> </form> <ul id="theList"></ul> <script src="script.js"></script>en javascript agregue algunas líneas para la funcionalidad de visualización
let data = []; function dispplayData({ target }) { const selectedItem = data.data.filter( (d) => d.attributes.IMDbRating === Number(target.value) ); const displayList = document.querySelector("#theList"); displayList.innerHTML = ""; selectedItem.forEach((item) => { let listItem = document.createElement("li"); listItem.textContent = item.attributes.title; displayList.appendChild(listItem); }); console.log(selectedItem); } const getData = async () => { try { const res = await fetch("http://134.209.87.8:1337/api/movies"); data = await res.json(); console.log(data); const imdbSelect = document.createElement("select"); document.querySelector("form").append(imdbSelect); imdbSelect.addEventListener("change", dispplayData); if (data.data.length > 0) { const IMDbRating = [ ...new Set(data.data.map((x) => x.attributes.IMDbRating)), ]; IMDbRating.forEach((category) => { const option = document.createElement("option"); option.textContent = category; imdbSelect.append(option); }); } } catch (err) { console.log(err); } }; getData();Espero que esto te ayude.