Javascript from JSON if parameter is true
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'?
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>
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)
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()
try this.
let movieTrailerUrl = data.videos.results.find((result) => result.key === 'What you want')
The find
method in Array is return the first element what be evaluated true
in array .
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find