Pass local variable's value into another function

I am not being able to pass one local variable’s value into another function.
Here is my code:

// constants
const key = 'my api key here';
const playlistId = 'UUuSrv3qgQA7SSi6R9bWag5A';
var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';

//youtube API sees all these info, so that it knows what kind of information you want to retrieve
const options = {
  playlistId: playlistId,
  maxResults: 20,
  key: key,
  part: 'snippet'
};

Above is the preparation.

let loadMainVideo = function () {

  //change URL to 
  URL += '?' + Object.keys(options).map((k) => k + '=' + encodeURIComponent(options[k])).join('&');
  //use fetch to get HTTP request
  fetch(URL)
    .then(res => res.json())
    .then(function (data) {
      console.log(data);
      loadPlayList(data); // THIS GIVES ME UNDEFINED
      var id = data.items[0].snippet.resourceId.videoId;
      console.log(id);
      //put the 1st video in the playlist into the dom
      document.getElementById('youtube_feed').innerHTML = `
      <iframe width="1280" height="720" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      `
    })
    .catch(err => console.log(err))
}

loadMainVideo();

The above code is the 1st function I created, in order to get youtube’s JSON from its server.

/*  
Load Playlist
*/
function loadPlayList(data) {
  console.log(data.items[0].snippet.descripton);
}

Youtube stores his data in this format:

If everything went right, I am supposed to get the description of the 1st video inside this JSON.

How do I pass the data variable’s value to the newly created function loadPlayList()?

Have you checked your developers tools network tab to see if the data is coming back from the server as you expect?

wait… the way I understand it is this, I’ve already logged out the data, how come I can’t retrieve it to another function?

this is the same code done using jQuery.

$(document).ready(function () {

    var key = [YOUR API KEY HERE];
    var playlistId = 'PL2fnLUTsNyq7A335zB_RpOzu7hEUcSJbB';
    var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';


    var options = {
        part: 'snippet',
        key: key,
        maxResults: 20,
        playlistId: playlistId
    }

    loadVids();

    function loadVids() {
        $.getJSON(URL, options, function (data) {
            var id = data.items[0].snippet.resourceId.videoId;
            mainVid(id);
            resultsLoop(data);
        });
    }

    function mainVid(id) {
        $('#video').html(`
					<iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
				`);
    }

		
    function resultsLoop(data) {

        $.each(data.items, function (i, item) {

            var thumb = item.snippet.thumbnails.medium.url;
            var title = item.snippet.title;
            var desc = item.snippet.description.substring(0, 100);
            var vid = item.snippet.resourceId.videoId;


            $('main').append(`
							<article class="item" data-key="${vid}">

								<img src="${thumb}" alt="" class="thumb">
								<div class="details">
									<h4>${title}</h4>
									<p>${desc}</p>
								</div>

							</article>
						`);
        });
    }

		// CLICK EVENT
    $('main').on('click', 'article', function () {
        var id = $(this).attr('data-key');
        mainVid(id);
    });


});

in this code the data is easily passed into another function.

ahhhh I misspelled

‘description’ to ‘descripton’…