Получить список видео API YouTube

поэтому я пытаюсь создать веб-приложение, которое, когда вы вставляете поиск, получает данные из API YouTube с использованием JSON и отображает список с видео, соответствующими вашему запросу. Когда он извлекает, он получает какой-то буквенный и числовой ответ, но не список видео. Любая помощь в правильном направлении будет оценена по достоинству. Это HTML-код:

     <div class = "search-box-container">
     <form action = "#" class = "js-search-form search-box">
      <label for = "query"></label>
      <input type = "text" class = "js-query search-form" placeholder = "Search me">
      <button type = "submit" class = "button">Search</button>
    </form>
  </div>

  <h2>Results</h2>

  <div class = "js-search-results">

  </div>

И это для него JS / JQuery:

  const YOUTUBE_SEARCH_URL = 
'https://www.googleapis.com/youtube/v3/search';
`const key = 'key'//(hidden for privacy concerns);`

function getDataFromApi(searchTerm, callback) {
 const query = {
  part: 'snippet',
  key: key,
  q: `${searchTerm} in:name`,
 }
  $.getJSON(YOUTUBE_SEARCH_URL, query, callback);
}

function renderResult(result) {
 return `
  <div>
   <h2>
   <a class = "js-result-name" href = "http//www.youtube.com/watch?v=${ 
   result.id.videoId}" target = "_blank">${result.id.videoId}</a></h2>
  </div>
 `;
}

function displayYoutubeSearchData(data) {
 console.info(data);
 const results = data.items.map((item, index) => renderResult(item));
 $('.js-search-results').html(results);
}

function watchSubmit() {
 $('.js-search-form').submit(event => {
  event.preventDefault();
  const queryTarget = $(event.currentTarget).find('.js-query');
  const query = queryTarget.val();
  queryTarget.val("");
  getDataFromApi(query,displayYoutubeSearchData );
 });
}


$(watchSubmit);

Это ответ, который появляется