Javascript – Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘videoId’)

Problem:

I get the error in the title when using the YouTube API to display videos in a grid format. My code is below:

fetch('https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=12&q=software%20quality%20assurance&type=video&videoDuration=short&key=AIzaSyA0c9e2X5lcxnbWGg2QaUJvdo4aDQlXiNM')
.then((result)=>{
    return result.json();
})
.then(data=>{
    console.log(data);
    let videos = data.items;
    let videoId = videos.id.videoId;
    let videoContainer = document.querySelector(".youtube_container");
    videos.forEach((video)=>{
        videoContainer.innerHTML += 
            //document.write(video.snippet.title);
            `<iframe src = "https://www.youtube.com/embed/${videoId}" frameborder = "0" allowfullscreen></iframe>`;
    })
})

What could the problem be?

Thanks!

Solution:

According to the json you returned, the videos are in an array.

fetch(url)
.then((result)=>{
    return result.json();
})
.then(data=>{

    // data.items is an array so you need to loop through items.
    for (let i = 0; i < data.items.length; i++) {
         const video = data.items[i]
         const videoId = video.id.videoId;

         // do what you want here.
    }
    
})