Movie API: How Can I Return The Value?

Question

I'm using The Movie Database API. The problem that I can't solve is returning "keys" variable when I call the function with Movie's id.I'm new on JavaScript that's why I can't solve this. Hope someone can help me.

const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=[MY API KEY HERE]&page-1";     
getMovies(APIURL)
async function getMovies(url)
{
    const resp = await fetch(url);
    const respData = await resp.json();
    showMovies(respData.results)
}
        async function getTrailer(id)
    {
         const resp = await fetch(`https://api.themoviedb.org/3/movie/${id}/videos?api_key=[MY API KEY HERE]&language=en-US`);
         const respDataa = await resp.json();
         let results = respDataa.results;
         let keys = results[0].key;
         return keys;
    }
    
    
    function showMovies(movies){
      movies.forEach(movie => {
           const modals = document.createElement('div');
         modals.classList.add('modal');
         modals.innerHTML = `  <a target="_blank" href ="https://www.youtube.com/watch?v=${getTrailer(movie.id)}">Watch Trailer</a>`

    }
}

Answer 1

We have to await or.then the return (it’s a Promise).

function showMovies(movies) {
      // make the forEach callback async
      movies.forEach(async (movie) => {
        console.log(getTrailer(movie.id)) // Promise {<pending>}
    
        const trailer = await getTrailer(movie.id);
        console.log({ trailer });
    
        const modals = document.createElement("div");
        modals.classList.add("modal");
        modals.innerHTML = `  <a target="_blank" href ="https://www.youtube.com/watch?v=${trailer}">Watch Trailer</a>`;
      });
    }