使用 Javascript 的 YouTube 数据 API v3答案

【问题标题】：YouTube Data API v3 Using Javascript使用 Javascript 的 YouTube 数据 API v3
【发布时间】：2015-11-23 04:37:22
【问题描述】：

我对编写代码和使用 API 有点陌生。我不完全确定为什么我的程序没有按我希望的方式运行。

我想要做的是在控制台中提供搜索结果，然后才能继续我希望它做的下一步；但是，我不认为正在搜索任何内容。

据此：https://developers.google.com/youtube/v3/docs/search/list#http-request，唯一需要的参数是“part”，所以我认为我做对了吗？可能不是，因为据我所知，当我尝试搜索一个词时，没有搜索任何内容。这是我的代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <form id="search-term">
            <p>Enter Name:<br/>
                <input id="query" type="text" name="Name"/><br/>
                <hr/>
                <input type="button" value="Enter here"/>
            </p>
            <div id="search-results">

            </div>
        </form>
    </section>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

JavaScript：

  $(document).ready(function(){

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


function getRequest(searchTerm){
  var params = {
    "q": "searchTerm",
    "part": 'snippet',
    "type": 'video',
    "key": 'I was advised to keep my key private, so I edited this part out'
  }
  url = 'https://www.googleapis.com/youtube/v3/search';

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

function showResults(results){
  var html = "";

  $.each(results, function(index,value){
    html += '<p>' + value.snippet.thumbnails.high.url + '</p>' + '<p>' + 'https://www.youtube.com/watch?v=' + value.id.videoId + '</p>' + '<hr/>';
    console.log(value.snippet.thumbnails.high.url);
    console.log(value);
  })
  $('#search-results').html(html);
}
})

【问题讨论】：

它向您的控制台输出了什么？
出于某种原因，它只是说“未定义”。我将在输入框（即搜索框）中输入一些内容，然后按“回车”键。控制台只是说“未定义”。
你能在上面加上console.log(data);，看看我们有什么收获吗？ :)
有效！谢谢！你知道为什么我从 console.log(data) 而不是 console.log(data.search) 得到一些东西吗？这可能是一个愚蠢的问题，但我还是新手 :)

标签： javascript youtube-data-api

【解决方案1】：

您可能想要data.items 而不是data.search

在他们的文档中列出的“响应”部分下，我没有看到任何提及“搜索”参数的内容。在此处查看响应属性：https://developers.google.com/youtube/v3/docs/search/list#response

因此，如果您使用console.log(data); 而不是data.search，您可能会看到一些输出

我建议您查看Google's Javascript API Client Library. 这可能不是您的最佳解决方案，但值得一试。 Download on GitHub

使用gapi.client.youtube.search.list:的示例

// After the API loads, call a function to enable the search box.
function handleAPILoaded() {
  $('#search-button').attr('disabled', false);
}

// Search for a specified string.
function search() {
  var q = $('#query').val();
  var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet'
  });

  request.execute(function(response) {
    var str = JSON.stringify(response.result);
    $('#search-container').html('<pre>' + str + '</pre>');
  });
}

【讨论】：

最后一个问题。我编辑了我的原始帖子以反映最新的代码。我打算开始一个全新的问题，但我想我会把它留在这里，这样我就可以把所有东西都“放在一起”。所以我一切正常；但是，无论我在输入框中输入什么，都没有任何变化。例如，如果我搜索苹果或披萨，我会得到完全相同的结果。我猜这与使用“stringify”有关。我认为是因为我们正在将信息从浏览器发送到服务器。如果这是正确的，您对我应该如何做有什么建议吗？我对此没有任何运气。
@LunchBox: "q": "searchTerm", 更改为 "q": searchTerm, .. 为了使用不能用引号括起来的变量 :)
我想当你使用 .getJSON 时，键必须用双引号引起来？我应该从参数中的所有内容中删除双引号吗？还是只是q？
@LunchBox 没有其他一切看起来都不错。只是为了让您了解数组或对象的“关键”是它的索引。在这种情况下，key 是 "q"，而 value 将设置为 searchTerm 变量的值（传递给函数） - 所以如果您的输入框充满oranges，它最终将等于"q": "oranges"，希望这是有道理的:)
是的，我误解了你第一次输入的内容哈哈，谢谢，现在一切正常！