javascript - 获取视频列表 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// 与 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 向用户显示视频的标题。