CODEWITHSUNDEEP
javascriptjsonapi
lowercase
lowercase

Reputation: 1220

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

Upvotes: 0

Views: 81

Answers (5)

Danyal Ahmad
Danyal Ahmad

Reputation: 26

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)

Upvotes: 1

SeongJaeSong
SeongJaeSong

Reputation: 221

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

Upvotes: 1

Poelinca Dorin
Poelinca Dorin

Reputation: 9703

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

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

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>

Upvotes: 1

Sourabh Semalty
Sourabh Semalty

Reputation: 90

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)

Upvotes: 1

Related Questions