Размещение videoID в iframe с использованием AJAX - PullRequest
Новая
       99

Размещение videoID в iframe с использованием AJAX

0 голосов
/ 17 октября 2018

Я пытаюсь отобразить YT-видео из одного из моих плейлистов через AJAX, но я не могу действительно заменить videoID из iframe данными, которые я выбрал.

Я выбрал свои данныекак это: 

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

и теперь я хочу проверить, смогу ли я получить один из идентификаторов видео на свой iframe, поэтому я попытался поместить его в один из моих разделов, например так: 

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

Но я всегда получаю сообщение о том, что переменная, которую я вставил в мою ссылку iframe, не определена.

1 Ответ

0 голосов
/ 17 октября 2018

Я не вижу data переменную где-либо определенную: 

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

Вы используете ${data.videoId} в URL в вашей функции putVideoOn, но я не вижу, гдеdata переменная определена.

Вы просто используете его в своей функции getData следующим образом: 

return data.items.map(playlist => {
    return {
      videoId: playlist.snippet.resourceId.videoId
}

, но вы ничего не сохраняете в переменную data, потому что она, вероятно, не существует

...