Question

我遇到以下问题，我想将旧的版本2 Youtube自动搜索脚本升级到版本3，但无法弄清楚我做错了什么，需要一些帮助。它发出以下失败消息：

test.php:27 Uncaught TypeError: Cannot read property 'items' of undefined
    at Object.success (test.php:27)
    at j (jquery-latest.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-latest.min.js:2)
    at x (jquery-latest.min.js:4)
    at XMLHttpRequest.b (jquery-latest.min.js:4)

这是我的代码，到目前为止仅替换了url和使用的api密钥。但是每次我在输入字段上键入内容时，它都会打印出上述错误。

<input id="searchquery" />
<div id="results"></div>

<!-- Include the latest jQuery library -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function ($) {

  $('#searchquery').keyup(function () {

    // the search term
    var q = $('#searchquery').val().trim();

    // container to display search results
    var $results = $('#results');

    // YouTube Data API base URL (JSON response)
    var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"



    $.getJSON(url + "&q=" + q, function (json) {

      var count = 0;

      if (json.data.items) {

        var items = json.data.items;
        var html = "";

        items.forEach(function (item) {


            // Include the YouTube Watch URL youtu.be 
            html += '<p><a href="https://youtu.be/' + item.id + '">';

            // Add the default video thumbnail (default quality)
            html += '<img src="https://i.ytimg.com/vi/' + item.id + '/default.jpg">';

            // Add the video title and the duration
            html += '<h2>' + item.title + ' ' + item.duration + '</h2></a></p>';
            count++;

        });
      }

      // Did YouTube return any search results?
      if (count === 0) {
        $results.html("No videos found");
      } else {
        // Display the YouTube search results
        $results.html(html);
      }
    });
  });
});
</script>

Answer 1

在使用JS Fiddle调试代码之后，这是我发现的。我试图记录json obj：

的响应

{
etag: ""XI7nbFXulYBIpL0ayR_gDh3eu1k/Ou9EhMuIjRoTlkkxhthG81p96AE""
items: (5) [{…}, {…}, {…}, {…}, {…}]
kind: "youtube#searchListResponse"
nextPageToken: "CAUQAA"
pageInfo: {totalResults: 1000000, resultsPerPage: 5}
regionCode: "PH"
}

这意味着您的json.data.items将是未定义的，因为对象内部没有属性data。

尝试将您的代码更改为json.items。这将解决您的错误。我想建议您是否遇到其他错误，请尝试使用 Chrome开发工具或使用console.log调试代码。

YouTube自动搜索，单个输出从v2升级到v3

1 个答案: