JavaScript: trying to show content of an array object into InnerHTML

Question

I'm fetching some information from the TMDb API and I'm showing it on the screen using InnerHTML, but I've hit a wall trying to display the name of genres that a movie has, because they're stored in a array. I want to show all the genres, some movies have more than one.

That's my code fragment (first time using 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>

Currently I'm using the index of the array, so I get the show only the first genre. I've used data.genres.join() and data.genres.join.toString(), but most of the time all I get is [object Object], [object Object], [object Object] (in this example, the movie has three genres).

Can someone help display all the contents of the array?

Thanks!

Answer 1

Your join isn't working because you need to extract the name from each object in the genres array which you can do with map() and then use join().

Something like:

<h6>${data.genres.map(o => o.name).join(', ')}</h6>