Javascript from JSON if parameter is true

Question

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

Nitheesh · Accepted Answer · 2022-01-13 06:28:19Z

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>

Sourabh Semalty · Accepted Answer · 2022-01-13 06:26:03Z

1

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)

answered Jan 13, 2022 at 6:26

Sourabh Semalty

907 bronze badges

4 Comments

Vasi Maruseac Over a year ago

This might work faster if you use a for instead of forEach and put a break if you found the needed key.

Sourabh Semalty Over a year ago

You nice comment brother... yeah let me edit it then

lowercase Over a year ago

That works in terms of getting it to print in console.log, but how does it translate to this line? let movieTrailerUrl = data.videos.results[0].key;

Sourabh Semalty Over a year ago

You can use find borther for that it will return that element to you the new answer is being posted you can check that too

Poelinca Dorin · Accepted Answer · 2022-01-13 06:29:06Z

1

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

answered Jan 13, 2022 at 6:29

Poelinca Dorin

9,7052 gold badges41 silver badges43 bronze badges

Comments

SeongJaeSong · Accepted Answer · 2022-01-13 06:29:46Z

1

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

answered Jan 13, 2022 at 6:29

SeongJaeSong

2213 silver badges10 bronze badges

Comments

Danyal Ahmad · Accepted Answer · 2022-01-13 06:34:27Z

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)

Collectives™ on Stack Overflow

Javascript from JSON if parameter is true

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related