使用 YouTube API 构建允许 YouTube 搜索的页面答案

【问题标题】：Building a page that allows YouTube Search using YouTube API使用 YouTube API 构建允许 YouTube 搜索的页面
【发布时间】：2015-05-03 06:43:42
【问题描述】：

这里有什么问题？我是 JavaScript 新手并使用 API。任何意见是极大的赞赏。我希望该页面仅在 youtube 上搜索 searchTerm 并将匹配的视频返回到控制台并将它们添加到文档中。

这是我的 HTML 和 JS。

HTML：

<body>
<form id="search-term">
    <input type="text" name="input" id="query" placeholder="Enter YouTube search here" />
    <label for="input"><input type="submit" class="submit" value="Submit" /></label>
</form>
<div id="search-results"> </div>

JS：

$(document).ready(function(){


$(function () {
    $('#search-term').submit(function(event){
      event.preventDefault();
      var searchTerm = $('#query').val();
      getRequest(searchTerm);
    }); 
});

function getRequest(searchTerm){
    var params = {
        part: 'snippet',
        key: 'AIzaSyBCaDivrcL_ivWRsuA_rw-UWH0Xr9K0iLQ',
        q: searchTerm,
//      r: 'json'
    };
    url = 'https://www.googleapis.com/youtube/v3/search';

    $.getJSON(url, params, function(data){
      showResults(data.Search);
    }); 
}

function showResults (results) {
    var html = "";
    $.each(results, function(index, value) {
        html += '<p>' + value.Title + '</p>';
        console.log(value.Title);
    });
    $('#search-results').html(html);
}

});

【问题讨论】：

你应该看看 XML，这是你可以用它做的：thenewboston.com/videos.php?cat=11&video=17093
youtube api v3 search by keyword javascript的可能重复

标签： javascript api youtube youtube-api

【解决方案1】：

问题在于 API 返回的内容。 YouTube API 正确返回您所拥有的内容，但 data 上没有 Search。在您的getJSON 中尝试console.log(data);，您会发现没有Search 对象...但有items，我认为这就是您想要的。

function getRequest(searchTerm){
  var params = {
    part: 'snippet',
    key: 'AIzaSyBCaDivrcL_ivWRsuA_rw-UWH0Xr9K0iLQ',
    q: searchTerm,
  //r: 'json'
  };
  url = 'https://www.googleapis.com/youtube/v3/search';

  $.getJSON(url, params, function(data){
    showResults(data.items); //<-- There is no `data.Search`
  }); 
}

function showResults (results) {
  var html = "";
  $.each(results, function(index, value) {
    html += '<p>' + value.snippet.title + '</p>';
    console.log(value.snippet.title); //<-- There is also no `Title` on value.
  });
  $('#search-results').html(html);
}

【讨论】：