I am using the TMDB API to get the details of movies and I need to grab the trailer from Youtube. If my JSON results are like this...
{
id: 568124,
results: [
{
iso_639_1: "en",
iso_3166_1: "US",
name: "What Else Can I Do?",
key: "PnJY20UCH9c",
site: "YouTube",
size: 1080,
type: "Clip",
official: true,
published_at: "2021-12-13T21:54:56.000Z",
id: "61b7d50b037264001cadc6e1",
},
{
iso_639_1: "en",
iso_3166_1: "US",
name: "Official Trailer",
key: "CaimKeDcudo",
site: "YouTube",
size: 1080,
type: "Trailer",
official: true,
published_at: "2021-09-29T13:00:05.000Z",
id: "615570dd07e281008dac4a0e",
},
],
};
How can I ONLY grab the KEY from the video marked with the NAME 'OFFICIAL TRAILER'. Right now, I can get the first result ([0]) from the list with the below code...
let movieTrailerUrl = data.videos.results[0].key;
document.getElementById('movie-trailer').innerHTML +=
`<div class="video-responsive"><iframe width="560" height="315" src="https://www.youtube.com/embed/${movieTrailerUrl}" title="${movieTitle}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
But I need to make sure the only video chosen from the JSON results is the one marked 'OFFICIAL TRAILER'. Is it possible to do something like 'get the key only if the 'name' is equal to 'Official Trailer'?
If i understand correctly you need only one key which matched the name official trailer
// this is your data i just added in the variable but you don't need to do this
const data = {
id: 568124,
results: [
{
iso_639_1: "en",
iso_3166_1: "US",
name: "What Else Can I Do?",
key: "PnJY20UCH9c",
site: "YouTube",
size: 1080,
type: "Clip",
official: true,
published_at: "2021-12-13T21:54:56.000Z",
id: "61b7d50b037264001cadc6e1",
},
{
iso_639_1: "en",
iso_3166_1: "US",
name: "Official Trailer",
key: "CaimKeDcudo",
site: "YouTube",
size: 1080,
type: "Trailer",
official: true,
published_at: "2021-09-29T13:00:05.000Z",
id: "615570dd07e281008dac4a0e",
},
],
};
const {results } = data
console.log(results)
let key
results.forEach((e) => {
if(e.name.includes("Official Trailer")) {
key = e.key
}
})
console.log(key)Use Array.find to find the matching node with its name. Here I have considered that you are trying to find an item from the array where the name is exactly "Official Trailer". Use the name and title of that matcing node to create the video link
const apiResponse = {
id: 568124,
results: [
{
iso_639_1: "en",
iso_3166_1: "US",
name: "What Else Can I Do?",
key: "PnJY20UCH9c",
site: "YouTube",
size: 1080,
type: "Clip",
official: true,
published_at: "2021-12-13T21:54:56.000Z",
id: "61b7d50b037264001cadc6e1",
},
{
iso_639_1: "en",
iso_3166_1: "US",
name: "Official Trailer",
key: "CaimKeDcudo",
site: "YouTube",
size: 1080,
type: "Trailer",
official: true,
published_at: "2021-09-29T13:00:05.000Z",
id: "615570dd07e281008dac4a0e",
},
],
};
const movieTrailer = apiResponse.results.find(node => node.name.toUpperCase() === 'OFFICIAL TRAILER')
const movieTrailerUrl = movieTrailer.key;
const movieTitle = movieTrailer.name; // Mark the correct node
document.getElementById('movie-trailer').innerHTML +=
`<div class="video-responsive"><iframe width="560" height="315" src="https://www.youtube.com/embed/${movieTrailerUrl}" title="${movieTitle}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;<div id="movie-trailer"></div>const movieTrailer = data.videos.results.find((trailer) => trailer.name === 'Official Trailer');
// if statment needed because `.find` can return undefined in case it doesn't find the value
if (movieTrailer) {
console.log(movieTrailer.key);
}
You would probably also want to lowercase values, eg. trailer.name.toLowerCase() === 'Official Trailer'.toLowerCase()