मैं AJAX के माध्यम से अपनी प्लेलिस्ट में से एक से YT वीडियो प्रदर्शित करने का प्रयास कर रहा हूं, लेकिन मैं वास्तव में वीडियो आईडी को 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 लिंक में जो वैरिएबल इंजेक्ट किया है, वह परिभाषित नहीं है।

0
ldcorreia 17 अक्टूबर 2018, 14:26

1 उत्तर

सबसे बढ़िया उत्तर

मुझे 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}`

आप अपने putVideoOn फ़ंक्शन में URL में ${data.videoId} का उपयोग कर रहे हैं, लेकिन मुझे नहीं पता कि data चर कहां परिभाषित किया गया है।

आप इसे अपने getData फ़ंक्शन में इस प्रकार उपयोग कर रहे हैं:

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

लेकिन आप चर data में कुछ भी नहीं सहेज रहे हैं क्योंकि यह शायद मौजूद नहीं है

1
johnchar 17 अक्टूबर 2018, 11:36