Javascript 获取视频列表youtube api

因此，我尝试创建一个web应用程序，当您插入搜索时，它会使用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);

const YOUTUBE\u SEARCH\u URL=
'https://www.googleapis.com/youtube/v3/search';
`const key='key'//（出于隐私考虑而隐藏）`
函数getDataFromApi（searchTerm，回调）{
常量查询={
部分：'代码片段'，
钥匙：钥匙，
q:${searchTerm}in:name`，
}
$.getJSON（YOUTUBE\u搜索\u URL、查询、回调）；
}
函数renderResult（结果）{
返回`
`;
}
函数显示YouTubeSearchData（数据）{
控制台日志（数据）；
const results=data.items.map（（项，索引）=>renderResult（项））；
$（'.js搜索结果'）.html（结果）；
}
函数watchSubmit（）{
$（'.js搜索表单'）。提交（事件=>{
event.preventDefault（）；
const queryTarget=$（event.currentTarget.find（'.js query'）；
const query=queryTarget.val（）；
queryTarget.val（“”）；
getDataFromApi（查询、显示YouTubeSearchData）；
});
}
$（提交）；

---

你就快到了：这只是一个打字错误

查看

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观看URL与视频id连接起来

---

您应该在中检查搜索结果的JSON结构。除了

id.videoId

，它还包含更多有用的信息。例如，您可能更愿意使用

${result.snippet.title}

而不是字母数字

videoId

向用户显示视频的标题

你能举一个你得到答案的例子吗？嗨，大卫，我贴出了我收到的答案search@Gianina我猜你已经在点击后获得链接并重定向到youtube，不是吗？@Viney不确定我得到的是什么，因为点击后会重定向到“未找到”，你得到的是有效视频的视频id，例如RnBT9uUYb1w-->。所以你只需要使用它们来弥补错误链接。如果你想嵌入它们，那就开始定制你想要的方式，然后在你的代码中使用html。谢谢你，这就是我要展示的，url检索到的标题。我想它可能正在检索正确的ingo（视频ID），但我需要的是title@GianinaSkarlett-你拿到了吗？链接正常吗？您是用

${result.snippet.title}

获得标题的吗？非常感谢！是的。现在我正在用它渲染缩略图@GianinaSkarlett-不客气！缩略图位于

${result.snippet.thumbnails}

中。我想您可以使用

${result.snippet.thumbnails.default.url}

获得默认值。谢谢@David！我会告诉你的！