使用TMDB从JSON到HTML输出

Question

我使用fetch API从TMBD中获取数据，我可以在控制台中这样显示.

fetch('https://api.themoviedb.org/3/movie/778?api_key=1234&append_to_response=videos,credits')
    .then(res => res.json())
    .then((out) => {
        console.log('Output: ', out);
}).catch(err => console.error(err));

JSON看起来像这样..。

{
"backdrop_path": "/8gSU1tLLdE5TWbcg9YDnR2lD0sO.jpg",
"belongs_to_collection": null,
"budget": 0,
"genres": [
    {
        "id": 99,
        "name": "Documentary"
    }
],
"homepage": "https://www.focusfeatures.com/roadrunner",
"id": 642732,
"imdb_id": "tt14512538",
"original_language": "en",
"original_title": "Roadrunner: A Film About Anthony Bourdain",
"overview": "An intimate, behind-the-scenes look at how an anonymous chef became a world-renowned cultural icon.",
"production_countries": [
    {
        "iso_3166_1": "US",
        "name": "United States of America"
    }
]

}

我现在需要把它放到一些简单的HTML中。例如，一些名为“original_title”和“概述”的变量，每个变量都在各自的div中.

<div>title outputs here</div>
<div>overview outputs here</div>

我知道这很简单，但我不能让JS工作。任何帮助都很感激。

Answer 1

这是一个供您参考的示例代码。

​

let out={
  "adult": false,
  "backdrop_path": "/fCayJrkfRaCRCTh8GqN30f8oyQF.jpg",
  "belongs_to_collection": null,
  "budget": 63000000,
  "genres": [
    {
      "id": 18,
      "name": "Drama"
    }
  ],
  "homepage": "",
  "id": 550,
  "imdb_id": "tt0137523",
  "original_language": "en",
  "original_title": "Fight Club",
  "overview": "A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground \"fight clubs\" forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion.",
  "popularity": 0.5,
  "poster_path": null
};

function go(){
  let overViewDiv=document.getElementById("overViewDiv");
  let originalTitleDiv=document.getElementById("originalTitleDiv");
  
  overViewDiv.innerHTML=out.overview;
  originalTitleDiv.innerHTML=out.original_title;
}

Over View:
<div id="overViewDiv"></div>
Original Title:
<div id="originalTitleDiv"></div>
<button onclick="go()">Go</button>

​

在你的情况下

1. 将每个div的id设置为示例代码.

1. 并替换：

Console.log(“输出：”，out)；

有：

让overViewDiv=document.getElementById("overViewDiv")；让originalTitleDiv=document.getElementById("originalTitleDiv")；overViewDiv.innerHTML=out.overview；originalTitleDiv.innerHTML=out.original_title;