Actualmente estoy iterando a través de una lista de películas y quiero poder hacer clic en cada elemento y pasar su información de película respectiva al evento de clic.
Así es como itero a través de mis datos. Quiero poder pasar la información de la película al evento de clic para que cuando haga clic en una película, pueda mostrar su información:
const APIKEY = 'api_key=blabla....'; const BASE_URL = 'https://api.themoviedb.org/3'; const API_URL = BASE_URL + '/discover/movie?sort_by=popularity.desc&' + APIKEY; const IMG_URL = 'https://image.tmdb.org/t/p/w500'; const SEARCH_URL = BASE_URL + '/search/movie?' + APIKEY; const main = document.getElementById('main') const form = document.getElementById('form') const search = document.getElementById('search') getMovies(API_URL); function getMovies(url) { fetch(url).then(res => res.json()).then(data => { showMovies(data.results); console.log(data.results) }) } function showMovies(data){ main.innerText = ''; data.forEach((movie, index) => { let {title, poster_path, release_date, overview} = movie; let movieEl = document.createElement('div'); movieEl.classList.add('movie'); movieEl.innerHTML = ` <div onclick="showMovieInfo(${movie[index]})" style="cursor: pointer;"> <img src="${IMG_URL + poster_path}" alt="${title}"> <div class="movie-info"> <h3>${title}</h3> <span>${release_date.slice(0,4)}</span> </div> <div class="overview"> ${overview} </div> </div> ` main.appendChild(movieEl) }) }Por ahora, solo quiero poder consolar. Registrar la información de la película para cada
function showMovieInfo(movie) { console.log(movie) }Actualmente recibo este error cuando hago clic en un elemento: Error de sintaxis no detectado: identificador inesperado
¿Saben qué podría hacer para que funcione?
El problema aquí es que el objeto "película" no existe en el contexto "innerHTML". Una solución sería serializar el objeto de la película o pasar el índice y luego obtener el objeto de la matriz de datos.
No puede pasar un objeto a innerHTML , por lo que debe pasar valores primitivos como string o number .
const main = document.getElementById('main'); const IMG_URL = "/" const data = [{title: "New Movie", poster_path:"",release_date:"2021-10-31", overview:"nice movie" }]; function showMovieInfo(movieId){ console.log(data[movieId]) } function showMovies(data){ main.innerText = ''; data.forEach((movie, index) => { let {title, poster_path, release_date, overview} = movie; let movieEl = document.createElement('div'); movieEl.classList.add('movie'); movieEl.innerHTML = ` <div onclick="showMovieInfo(${index})" style="cursor: pointer;"> <img src="${IMG_URL + poster_path}" alt="${title}"> <div class="movie-info"> <h3>${title}</h3> <span>${release_date.slice(0,4)}</span> </div> <div class="overview"> ${overview} </div> </div> ` main.appendChild(movieEl) }) } showMovies(data); <div id="main"> </div>