How to Retrieve Values from a Movie API?

Question

How to Retrieve Values from a Movie API?

Struggling with The Movie Database API integration. Specifically, I'm stuck on retrieving the "keys" variable when calling the function with the Movie's id. I'm still learning JavaScript, so this is proving to be a bit challenging. Any assistance would be greatly appreciated.


        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>`
            });
        }

javascript fetch-api themoviedb-api

Answer 1

Answer №1

One important rule to always follow is to never expose your API keys when sharing your code, even if it's on a private repository.

Additionally, if you need to retrieve multiple keys, you can use the map function to extract the keys individually before returning them:

async function fetchKeys(id)
{
     const response = await fetch(`https://api.example.com/keys/${id}?api_key=your-api-key`);
     const data = await response.json();
     let keys = data.keys;
     return keys.map(({ id }) => id);
}

Answer 2

One important rule to always follow is to never expose your API keys when sharing your code, even if it's on a private repository.

Additionally, if you need to retrieve multiple keys, you can use the map function to extract the keys individually before returning them:

async function fetchKeys(id)
{
     const response = await fetch(`https://api.example.com/keys/${id}?api_key=your-api-key`);
     const data = await response.json();
     let keys = data.keys;
     return keys.map(({ id }) => id);
}

Answer 3

Answer №2

Async functions in JavaScript yield a Promise as their return value.
All you need to do is append return keys at the conclusion of your function.

Subsequently, you can execute:

getTrailer(528085).then(data => {
 // manipulate the data here
})

Error handling is also feasible:

getTrailer(528085)
  .then(data => {
    // manipulate the data here
   })
  .catch(err => {
    /* 
    An error has occurred. Use err.toString() to convert the error into a string
    */
})

If you wish to promptly retrieve the returned data from an async function(or a promise), embed your logic inside an async function, then you can easily execute:

let keys = await getTrailer(528085)

Additionally, here is how to manage errors with async/await:

try {
  let keys = await getTrailer(528085)
}
catch(err){
    /* 
    An error occurred. You can use err.toString() to convert the error into a string
    */
}

By the way, in the words of Desiigner, avoid storing your API keys in the client side. Your API key is exposed to everyone. Utilize a server to transmit the API response to the client instead.

Answer 4

Async functions in JavaScript yield a Promise as their return value.
All you need to do is append return keys at the conclusion of your function.

Subsequently, you can execute:

getTrailer(528085).then(data => {
 // manipulate the data here
})

Error handling is also feasible:

getTrailer(528085)
  .then(data => {
    // manipulate the data here
   })
  .catch(err => {
    /* 
    An error has occurred. Use err.toString() to convert the error into a string
    */
})

If you wish to promptly retrieve the returned data from an async function(or a promise), embed your logic inside an async function, then you can easily execute:

let keys = await getTrailer(528085)

Additionally, here is how to manage errors with async/await:

try {
  let keys = await getTrailer(528085)
}
catch(err){
    /* 
    An error occurred. You can use err.toString() to convert the error into a string
    */
}

By the way, in the words of Desiigner, avoid storing your API keys in the client side. Your API key is exposed to everyone. Utilize a server to transmit the API response to the client instead.

Answer 5

Answer №3

We must patiently await the return (as it is a Promise).

function displayMovies(movies) {
      // ensure the forEach callback is asynchronous
      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>`;
      });
    }

Answer 6

We must patiently await the return (as it is a Promise).

function displayMovies(movies) {
      // ensure the forEach callback is asynchronous
      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>`;
      });
    }

How to Retrieve Values from a Movie API?

Answer №1

Answer №2

Answer №3

Similar questions

Get the @html.dropdownlistfor filtered for me

Establishing headers in hapi.js

### Setting Default String Values for Columns in TypeORM MigrationsDo you want to know how to

JavaScript code that displays values that are not equal

Struggling to make the upvoting feature function properly in the Thinkster MEAN Stack Tutorial

Dividing ReactJS into different assemblies

Utilizing jQuery to efficiently chunk JSON data through AJAX calls

Struggling to send information using Angular $resource?

Tips for showing all percentages on a Google PieChart

Unable to view cross domain cookies within the browser's development tools

What is the best way to store client-uploaded files on the client-side using Bootstrap forms and Express server code?

Using the split and join methods in PHP for Javascript operations

Is it possible to apply several 'where' condition in pg-promise?

Infinite scroll layout meets Semantic UI visibility for a dynamic user experience

Enhance your webpage with our jQuery plugin that allows you to easily make Ajax

Invoke a controller in Prestashop by utilizing AJAX technology

What is the process for importing a .gltf/.glb model into a Three.js application?

How to effectively utilize wrapAsync in MeteorJS when working with callbacks in the vzaar API?

Ways to determine whether one side of a selected div is not obstructed by other divs

Exploring JSON data for auto-complete suggestions