使用TMDB API将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'和'overview'的变量，每个变量都有自己的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作为示例代码。

2. 并替换为

   console.log('Output: ', out);
   

   :

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