Reputation: 39
I'm trying to display YT videos from one of my playlists through AJAX, but I can't really replace the videoID from an iframe
with the data that I fetched.
I fetched my data like this:
const apiKey = 'MY_API_KEY'
const playlistId = "MY_PLAYLIST_ID"
const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=${playlistId}&key=${apiKey}`
const getData = function () {
return fetch(url)
.then(response => response.json())
.then(data => {
return data.items.map(playlist => {
return {
videoId: playlist.snippet.resourceId.videoId
}
})
})
}
and now I want to test if I can get one of the videoIds onto my iframe
, so I tried to place it into one of my sections like this:
const playerTag = document.querySelector(".player")
const putVideoOn = function () {
playerTag.innerHTML = ""
playerTag.innerHTML = playerTag.innerHTML + `
<div class="player-video">
<iframe width="480" height="360" src="https://www.youtube.com/embed/${data.videoId}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
`
}
// then I ran the function on load
putVideoOn()
But I always get an error saying that the variable I injected into my iframe
link isn't defined.
Upvotes: 0
Views: 63
Reputation: 547
I don't see data
variable anywhere defined:
const apiKey = 'MY_API_KEY'
const playlistId = "MY_PLAYLIST_ID"
const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=${playlistId}&key=${apiKey}`
You are using ${data.videoId}
in the URL in your putVideoOn
function but I don't see where the data
variable is defined.
You are just using it in your getData
function like so:
return data.items.map(playlist => {
return {
videoId: playlist.snippet.resourceId.videoId
}
but you are not saving anything in the variable data
because it doesn't exist probably
Upvotes: 1