Estoy obteniendo información de la API de TMDb y la estoy mostrando en la pantalla usando InnerHTML, pero me he topado con una pared tratando de mostrar el nombre de los géneros que tiene una película, porque están almacenados en una matriz. Quiero mostrar todos los géneros, algunas películas tienen más de uno.
Ese es mi fragmento de código (primera vez que uso JavaScript):
//TMDB INTEGRATION - API KEY const API_KEY = 'api_key=APIKEYNUMBER'; const BASE_URL = 'https://api.themoviedb.org/3/'; const API_LANGUAGE = '&language=pt-BR'; var ID = '299536'; const API_MOVIE = BASE_URL + 'movie/' + ID + '?' + API_KEY + API_LANGUAGE; const overviewfilme = document.getElementById('overviewfilme'); detalheFilme(API_MOVIE); function detalheFilme(url) { fetch(url) .then(res => res.json()) .then(data => document.getElementById("colunaesquerda").innerHTML = ` <h3 id="nomedofilme">${data.title}</h3> <h5 style="font-style: italic">${data.original_title}</h5> <table> <tr> <td style="padding-right: 10px;"> <h6>${data.release_date}</h6> </td> <td style="padding-right: 10px;"> <h6>${data.genres[0].name}</h6> //THE SPECIFIC LINE </td> <td style="padding-right: 10px;"> <h6>${data.runtime} mins</h6> </td> </tr>Actualmente estoy usando el índice de la matriz, por lo que obtengo el programa solo del primer género. He usado data.genres.join() y data.genres.join.toString(), pero la mayoría de las veces todo lo que obtengo es [objeto Objeto], [objeto Objeto], [objeto Objeto] (en este ejemplo, la película tiene tres géneros).
¿Alguien puede ayudar a mostrar todo el contenido de la matriz?
¡Gracias!
Su combinación no funciona porque necesita extraer el name de cada objeto en la matriz de géneros, lo que puede hacer con map() y luego usar join() .
Algo como:
<h6>${data.genres.map(o => o.name).join(', ')}</h6>Como puedo ver, la respuesta tiene una variedad de objetos de géneros. Necesitas extraer el nombre del género. Puede usar Array.map para extraer el nombre.
fetch(url) .then((res) => res.json()) .then( (data) => (document.getElementById("colunaesquerda").innerHTML = ` <h3 id="nomedofilme">${data.title}</h3> <h5 style="font-style: italic">${data.original_title}</h5> <table> <tr> <td style="padding-right: 10px;"> <h6>${data.release_date}</h6> </td> <td style="padding-right: 10px;"> <h6>${data.genres.map(({name}) => name).join(", ")}</h6> //THE SPECIFIC LINE </td> <td style="padding-right: 10px;"> <h6>${data.runtime} mins</h6> </td> </tr>`) );