JavaScript：尝试将数组对象的内容显示到 InnerHTML答案

【问题标题】：JavaScript: trying to show content of an array object into InnerHTMLJavaScript：尝试将数组对象的内容显示到 InnerHTML
【发布时间】：2021-12-04 21:31:13
【问题描述】：

我正在从 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.genres.join() 和 data.genres.join.toString()，但大多数时候我得到的只是 [object Object]、[object Object]、[object Object]（在这个例子中，这部电影分为三种类型）。

有人可以帮忙显示数组的所有内容吗？

谢谢！

【问题讨论】：

请求的响应是什么？
请注意，您现在已经向公众公开了您的 API 密钥，需要撤销它并创建新的

标签： javascript html arrays api innerhtml

【解决方案1】：

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

类似：

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

【讨论】：

非常感谢！成功了！

【解决方案2】：

正如我所见，响应有一系列类型的对象。您需要提取流派的名称。您可以使用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>`)
    );

【讨论】：

非常感谢！成功了！