Estoy haciendo un sitio web de filtros de películas para la escuela. Ahora, la última parte es que necesito vincular el imdbID de mi matriz a los carteles de películas en la pantalla. Hice los enlaces, la mecánica del filtro funciona, pero cuando hago clic en un póster, todas las ID de ese filtro se agregan al final. No sólo uno.
Mi maestro dice que puedo forEach a través de la matriz movieArray y escribir todo lo que necesito en ese ciclo. ¿Puede alguien ayudarme o mirar mi código qué estoy haciendo mal? Escribí 2 funciones separadas ahora para crear los argumentos necesarios.
Mi código:
const addMoviesToDom = function (movieArray) { const movieList = document.querySelector("#movielist"); movieList.innerHTML = ""; const moviePoster = movieArray.map(item => { return item.Poster; }); const imdbId = movieArray.map(item => { return item.imdbID; }) moviePoster.forEach(element => { let newLi = document.createElement("li"); let newLink = document.createElement("a"); let images = document.createElement("img"); images.src = element; newLink.setAttribute("href", "https://www.imdb.com/title/" + imdbId); newLink.setAttribute("target", "_blank"); newLi.append(newLink); newLink.append(images); movieList.appendChild(newLi); }) }; addMoviesToDom(movies);Gracias de antemano, espero que entiendan lo que estoy tratando de explicar, todo esto es bastante nuevo para mí.
imdbId es una matriz de todos los ID. Cuando lo concatena con "https://www.imdb.com/title/" , se convierte en una cadena , que une todos los ID con un delimitador. Por lo tanto, no está configurando href solo en la ID correspondiente al elemento moviePoster actual.
Debe indexar la matriz para obtener la identificación correcta. forEach proporciona el índice de matriz como el segundo argumento de la función de devolución de llamada, por lo que puede cambiar element => a (element, i) => y luego usar imdbId[i] .
Pero una forma más sencilla sería omitir la creación de las matrices moviePoster e imdbId y simplemente crear todos los elementos desde movieArray .
const addMoviesToDom = function(movieArray) { const movieList = document.querySelector("#movielist"); movieList.innerHTML = ""; movieArray.forEach(element => { let newLi = document.createElement("li"); let newLink = document.createElement("a"); let images = document.createElement("img"); images.src = element.Poster; newLink.setAttribute("href", "https://www.imdb.com/title/" + element.imdbId); newLink.setAttribute("target", "_blank"); newLi.append(newLink); newLink.append(images); movieList.appendChild(newLi); }) }; addMoviesToDom(movies);