JSON 到 HTML 使用 TMDB API 输出

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>

在你的情况下，

设置每个div的id作为示例代码

并替换：

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

与 :

   let overViewDiv=document.getElementById("overViewDiv");
   let originalTitleDiv=document.getElementById("originalTitleDiv");

   overViewDiv.innerHTML=out.overview;
   originalTitleDiv.innerHTML=out.original_title;

JSON 到 HTML 使用 TMDB API 输出

JSON to HTML output using TMDB API

javascript

api

fetch-api