Question

我正在使用YouTube API（v3）构建示例应用程序，该应用程序将根据搜索字词提供视频列表。这个概念是使用响应中的数据填充页面。

我使用v3中记录的客户端库来访问API，并发送我的请求，但是我不知道如何正确浏览响应中提供的数据以显示所需的元素。下面的代码显示了我的脚本，我试图访问并在响应中列出视频的标题：

 $(function () {
    //FUNCTION TO COLLECT QUERY TERM FROM SEARCH FORM
     var $searchField = $('#search-text');

    $('#mainSearch'). on ('submit', function(e){
        e.preventDefault();
        if ($searchField.val() !== '') { //IF SEARCH FORM IS NOT EMPTY
                var $searchQuery = $searchField.val()+ ' parody'; //PREPARE SEARCH QUERY
                makeRequest($searchQuery);  //PASS SEARCH QUERY TO REQUEST FUNCTION
            }
            else {
                $searchField.focus(); //ADD ERROR CLASS HERE
                $searchField.blur(function (e){
                    //REMOVE ERROR CLASS HERE
            });

        }
    });

    function makeRequest(query){
        var request = gapi.client.youtube.search.list({
            part: 'snippet',
            q: query
        });
        $('.content').empty();
        request.execute(parseResponse);
    }

    function parseResponse(data) {
        $.each(data, function (i, items){
            var $infoDiv = $('<div></div>');
            $infoDiv.append('<p>'+ items.snippet.title +'</p>');
            $('.content').append($infoDiv);
        });
    }

});

//LOAD API CLIENT
function initClient() {
        gapi.client.load('youtube', 'v3');
        gapi.client.setApiKey('AIzaSyARVmOp3tBIA3ZgW6z4DK_-1sMJwulPvps');
}

但是我的页面确实没有填充任何数据，我在控制台中收到此错误：

未捕获的TypeError：无法读取属性＆＃39; title＆＃39;未定义的

这是我的页面的标记：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Parrdy Template</title>
    <!--
    <Bootstrap></Bootstrap>-->
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet"/>
    <link href="stylesheets/style.min.css" rel="stylesheet"/>
    <!--
    <HTML5>Shim and Respond.js IE8 support of HTML5 elements and media queries </HTML5>--><!--
    <WARNING>
      <Respond class="js">doesn't work if you view the page via file:// </Respond>
    </WARNING>--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="header">
        <img src="/images/Logo1_mod.png" width="200">
        <form role="form" id= "mainSearch" class="navbar-form navbar-right pull-right">
          <div class="form-group">
            <input type="text" id="search-text" placeholder="Search" class="form-control">
          </div>
          <button type="submit" id="vid-search" class="btn btn-sm btn-warning">Search</button>
        </form>
      </div>

      {{{body}}}

      <div class="footer">
        <ul class="nav nav-pills pull-left">
            <li><a class="customcolor" href="#">About</a></li>
            <li><a class="customcolor" href="#">Contact Us</a></li>
          </ul>
      </div>
    </div><!--container ends-->
    <!--
    <jQuery>(necessary for Bootstrap's JavaScript plugins) </jQuery>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!--
    <Include>all compiled plugins (below), or include individual files as needed</Include>-->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/core1.1.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=initClient" type="text/javascript">
    </script>
  </body>
</html>

有关如何从YouTube API响应中正确访问元素的任何帮助将不胜感激。感谢。

Answer 1

您要记住的第一件事是，您要处理的内容作为数据嵌套在响应中，因此您需要访问“ response.data”，并且该数据中包含一组项目。您现在要访问带有items [0]的第一个数组，现在您可以从此处获取ID或使用.snippet或.statistic

进行深入研究

get(url)
.then(response => {
id: response.DATA.items[0].id
title: response.DATA.items[0].snippet.title
}
.catch(
error => {console.log(error)}

Answer 2

你应该改变你的循环：

   $.each(data.videos, function (i, items){
            var $infoDiv = $('<div></div>');
            $infoDiv.append('<p>'+ items.snippet.title +'</p>');
            $('.content').append($infoDiv);
    });

正确解析来自YouTube API的响应

2 个答案: