Javascript from JSON if parameter is true

January 13, 2022

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’?

>Solution :

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