获取视频列表 youtube api

Question

所以我正在尝试创建一个网络应用程序，当您插入搜索时，它会使用 JSON 从 youtube API 获取数据，并呈现一个包含与您的搜索匹配的视频的列表。当它检索时，它会得到一些字母和数字答案，但不是视频列表。任何正确方向的帮助将不胜感激。这是它的 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.log(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);

This is the answer that gets rendered

Answer 1

你快到了：这只是一个错字。

查看renderResult() 方法返回的模板文字内的href 属性。

href="http//www.youtube.com/watch?v=${result.id.videoId}"

注意格式错误的方案（http// vs https://）。

一点上下文：

YouTube API 返回与 API 请求中指定的查询参数匹配的搜索结果集合（即对象数组，代码中的 data.items）。

每个项目都包含一个带有videoId 属性的id 对象。这就是您在问题中提到的“字母数字答案”。在将data.items 映射到result HTML 模板数组之后，您正在读取带有${result.id.videoId} 的视频ID。然后将 YouTube watch URL 与视频 ID 连接起来。

您应该检查YouTube Data API docs 中搜索结果的JSON 结构。除了id.videoId，它还包含更多有用的信息。例如，您可能更愿意使用${result.snippet.title} 而不是字母数字videoId 向用户显示视频的标题。