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

谁能帮忙显示数组的所有内容？

谢谢！

Answer 1

您的连接无效，因为您需要从 genres 数组中的每个对象中提取 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>`)
    );

JavaScript: 尝试将数组对象的内容显示到 InnerHTML 中

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

html

javascript

arrays

api

innerhtml