Estoy usando la API de búsqueda para obtener datos de TMBD que puedo mostrar en la consola de esta manera...
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));El JSON se ve así...
{ "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" } ]}
Ahora necesito colocar esto en un HTML simple. Por ejemplo, algunas variables que se denominan 'título_original' y 'resumen', cada una en su propio div...
<div>title outputs here</div> <div>overview outputs here</div>Sé que esto es muy simple, pero no puedo hacer que JS funcione. Cualquier ayuda apreciada.
Este es un código de muestra para su referencia.
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>En tu caso,
Establezca la identificación para cada div como código de muestra.
Y reemplazar:
console.log('Output: ', out);con :
let overViewDiv=document.getElementById("overViewDiv"); let originalTitleDiv=document.getElementById("originalTitleDiv"); overViewDiv.innerHTML=out.overview; originalTitleDiv.innerHTML=out.original_title;