I am using the fetch API to grab data from TMBD which I can display in the console like this...
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));
The JSON looks like this...
{
"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"
}
]
}
I now need to drop this into some simple HTML. For example, some variables that are named 'original_title' and 'overview', each in their own div...
<div>title outputs here</div>
<div>overview outputs here</div>
I know this is very simple, but I can't get the JS to work. Any help appreciated.
This is a sample code for your reference.
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>In your case,
Set the id for each div as the sample code.
And replace :
console.log('Output: ', out);
with :
let overViewDiv=document.getElementById("overViewDiv");
let originalTitleDiv=document.getElementById("originalTitleDiv");
overViewDiv.innerHTML=out.overview;
originalTitleDiv.innerHTML=out.original_title;