Javascript from JSON if parameter is true-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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)

CodePudding user response：

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()

CodePudding user response：

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

CodePudding user response：

What I understand is that you want to get the "official trailer" object from an array of objects

var obj = {
  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",
    },
  ],
};

console.log(obj.results.find(element => element.name === "Official Trailer"))
console.log(obj.results.find(element => element.name === "Official Trailer").key)