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

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

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

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

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

一点点背景：

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

每个项目都包含一个具有id属性的videoId对象。那就是您在问题中所指的“ 字母数字答案”。将data.items映射到result HTML模板数组后，您正在使用${result.id.videoId}读取该视频ID。然后，您将YouTube 观看 URL与视频ID串联在一起。

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

获取视频列表youtube api

1 个答案:

一点点背景：