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!

Note you have now exposed your API key to the public and will need to revoke it and create new one — charlietfl, Oct 17 '21 at 15:30

score 0 · Accepted Answer · answered Oct 17 '21 at 15:28

0

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>

answered Oct 17 '21 at 15:28

charlietfl

170,828
13
121
150

score 0 · Answer 2 · answered Oct 17 '21 at 18:18

As I can see response has an array of objects of genres. You need to extract the name of the genre. You can use Array.map to extract the name.

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>`)
    );

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

2 Answers2