JavaScript:试图在InnerHTML中显示数组对象的内容

Question

我正在从TMDb API获取一些信息，并使用InnerHTML在屏幕上显示它，但是我在试图显示电影类型的名称时遇到了瓶颈，因为它们存储在数组中。我想展示所有的类型，有些电影不止一个。

这是我的代码片段(第一次使用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>

目前我正在使用数组的索引，所以我只显示第一个类型。我使用过data. gens .join()和data. gens .join. tostring()，但大多数时候我得到的都是[object object]， [object object]， [object object](在这个例子中，电影有三种类型)。

有人可以帮助显示数组的所有内容吗?

谢谢!

Answer 1

您的连接不起作用，因为您需要从流派数组中的每个对象中提取name，您可以使用map()，然后使用join()。

类似:

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

Answer 2

我可以看到response有一个类型对象数组。您需要提取类型的名称。您可以使用Array.map提取名称。

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