使用API​​v3（jquery）获取多个视频的Youtube视图计数

Question

我正在尝试创建包含视频，标题，说明，日期和观看次数的YouTube社交Feed。我有一切工作，除了最后一个，查看计数。我已经能够让观看次数显示出来，但它们总是出现故障，而我却迷失了如何使它们与各自的视频相匹配。我用这个视频作为初步教程：[https://www.youtube.com/watch?v=jdqsiFw74Jk][1]它让我走了这么远，但现在我又迷失了。这是我的代码通过代码笔：[http://codepen.io/ThatsMyJams/pen/EjZWex][2]

这是我的HTML：

<div id="container">
  <h2>Results:</h2>
  <ul id="results"></ul>
</div>

这是我的javascript：

var yourApiKey = 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE';

    var channelName = 'GoogleDevelopers';
    var vidCount = 5;
    var vidHeight = 275;
    var vidWidth = 400;

    $(document).ready(function(){
        $.get(
            "https://www.googleapis.com/youtube/v3/channels", {
                part: 'contentDetails',
                forUsername: channelName,
                key: yourApiKey},
            function(data){
                $.each(data.items, function(i, item){
                    console.log(item);
                    playerID = item.contentDetails.relatedPlaylists.uploads;
                    getVids(playerID);
                })
            }
        );
        function getVids() {
            $.get(
                "https://www.googleapis.com/youtube/v3/playlistItems", {
                    part: 'snippet',
                    maxResults: vidCount,
                    playlistId: playerID,
                    key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'},
                function(data){
                    var output;
                    $.each(data.items, function(i, item){
                        console.log(item);
                        vidTitle = item.snippet.title;
                        videoID = item.snippet.resourceId.videoId;
                        vidDate = item.snippet.publishedAt;
                        vidDesc = item.snippet.description;      

                        output = '<li>'+vidTitle+'<span class="date">'+vidDate+'</span><p class="description">'+vidDesc+'</p><iframe height="'+vidHeight+'" width ="'+vidWidth+'" src=\"//www.youtube.com/embed/'+videoID+'\"></iframe></li>';

                        //append to results list
                        $('#results').append(output);
                        getViews(videoID[i]);
                    })
                }
            );
        }
        function getViews() {
            $.get(
                "https://www.googleapis.com/youtube/v3/videos", {
                    part: 'statistics',
                    id: videoID,
                    key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'},
                function(data){
                    var output2;
                    $.each(data.items, function(i, item){
                        vidViews = item.statistics.viewCount;

                        output2 = '<span class="views">'+vidViews+'</span>'
                        //append to results list
                        $('#results li').each(function() {
                            $(this).append(output2);
                        });
                    })
                }
            );
        }
    });

我只想获取每个视频的viewCount并将其插入到html中，就像我为标题，日期等所做的那样。任何帮助都将非常感激：）

Answer 1

这是您修改后的代码。这将在每个视频的末尾显示视图：

var yourApiKey = 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE';

var channelName = 'GoogleDevelopers';
var vidCount = 5;
var vidHeight = 275;
var vidWidth = 400;

$(document).ready(function () {
    $.get(
        "https://www.googleapis.com/youtube/v3/channels", {
            part: 'contentDetails',
            forUsername: channelName,
            key: yourApiKey
        },
        function (data) {
            $.each(data.items, function (i, item) {
                console.log(item);
                playerID = item.contentDetails.relatedPlaylists.uploads;
                getVids(playerID);
            })
        }
    );
    function getVids() {
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems", {
                part: 'snippet',
                maxResults: vidCount,
                playlistId: playerID,
                key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'
            },
            function (data) {
                var output;
                $.each(data.items, function (i, item) {
                    console.log(item);
                    vidTitle = item.snippet.title;
                    videoID = item.snippet.resourceId.videoId;
                    vidDate = item.snippet.publishedAt;
                    vidDesc = item.snippet.description;
                    var viewCountId = "viewCount" + i;
                    output = '<li>' + vidTitle + '<span class="date">' + vidDate + '</span><p class="description">' + vidDesc + '</p><iframe height="' + vidHeight + '" width ="' + vidWidth
                        + '" src=\"//www.youtube.com/embed/' + videoID + '\"></iframe>"<span id="' + viewCountId + '"></span></li>';

                    //append to results list
                    $('#results').append(output);

                    getViews(viewCountId);



                })
            }
        );
    }
    function getViews(viewCountId) {
        $.get(
            "https://www.googleapis.com/youtube/v3/videos", {
                part: 'statistics',
                id: videoID,
                key: 'AIzaSyDpY9FHgp7EvnDr5mGrxWwKgUBtfM8l5PE'
            },
            function (data) {
                var output2;
                $.each(data.items, function (i, item) {
                    $('#'+viewCountId).text("views=" + item.statistics.viewCount);
                })
            }
        );
    }
});