获取 playlistItems 的 viewCount，联合 HTTP 请求 youtube v3 + JQuery

Question

我在这里慢慢变得疯狂 :( 我无法做一件看似简单的事情。我使用 yt api v3 从频道获取特定播放列表的视频。现在我使用两个 HTTP 请求（频道和播放列表项）：

获取给定用户名 (channels/contentDetails) 的所有上传的播放列表 ID
从 html-tag
使用 ids 获取每个播放列表的视频信息 (playlistItems/snippet)
输出视频信息，附加到列表

这段代码目前有效：

HTML

<h2><span>List 1</h2>
<ul data-plist="PLquImyRfMt6dWNzlyTHW9m353VadxKKg_"></ul>

<h2>List 2</h2>
<ul data-plist="PLquImyRfMt6d4gk6zX8FPEZeyYgE4oBdR"></ul>

<h2>List 3</h2>
<ul data-plist="PLquImyRfMt6fnpIb9VR9c6VLZwYs_OyWL"></ul>

JS / JQUERY:

var channelName = 'goetheinstitut';
var vidResults = 3;


// Get all Videos from the channel via Playlist "uploads"
$.get(
    "https://www.googleapis.com/youtube/v3/channels", {
    part: 'contentDetails',
    forUsername: channelName,
    key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
},

function (data) {
    $.each(data.items, function (i, item) {
        pid = item.contentDetails.relatedPlaylists.uploads;
        getVids(pid);
    });
});

// Get videos for specific Playlist, id from data attr

function getVids(pid) {

    $("[data-plist]").each(function () {

        var vidPlaylist = $(this).data('plist');
        var mylist = $(this);

        // Get and output Playlist Items
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems", {
            part: 'snippet',
            maxResults: vidResults,
            playlistId: vidPlaylist,
            key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
        },

        function (data) {
            var output;

            $.each(data.items, function (i, item) {
                videoTitle = item.snippet.title.substring(8);
                videoId = item.snippet.resourceId.videoId;

                output = '<li><a href=\"//www.youtube.com/embed/' + videoId + '?autoplay=1&showinfo=0&controls=0\"><h3>' + videoTitle + '</h3><small>viewCount</small></a></li>';

                //Append to results list                            
                $(mylist).append(output);
                });
            });
        });
    }

现在我还需要每个视频的 viewCount。 这意味着我必须将每个播放列表的 videoId 存储在一个数组中，然后发出新请求（https://www.googleapis.com/youtube/v3/videos) for statistics.viewCount. But I can't manage it with the code I already have. Here's a jsfiddle.

这是对 viewCount 的请求，其中包含一个手动输入的 ID 数组：

$.get(
    "https://www.googleapis.com/youtube/v3/videos", {
    part: 'statistics',
    // 3 ids from List 1 - these would have to come as variable
    id: '8kFevX-bp8g, L6thExvypGg, D_RBv6Bsm6E',
    key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
},

function (data) {
    var listviews;

    $.each(data.items, function (i, item) {
        views = item.statistics.viewCount;

        listviews = '<li>'+views+'</li>';

        $('#results').append(listviews);
        // should be part of the output from the previous function...           
    });
});

有人可以帮我把这两个请求拼接起来吗？我总是以一些未定义的变量结束，因为我超出了范围。 :(

Answer 1

我可能没有正确理解您的要求。

但是，这段代码怎么样？

var channelName = 'goetheinstitut';
var vidResults = 3;

$.get(
    "https://www.googleapis.com/youtube/v3/channels", {
    part: 'contentDetails',
    forUsername: channelName,
    key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
},
function (data) {
    $.each(data.items, function (i, item) {
        var pid = item.contentDetails.relatedPlaylists.uploads;
        getVids(pid);
    });
});

function getVids(pid) {
    $("[data-plist]").each(function () {
        var vidPlaylist = $(this).data('plist');
        var mylist = $(this);
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems", {
            part: 'snippet',
            maxResults: vidResults,
            playlistId: vidPlaylist,
            key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
        },
        function (data) {
            $.each(data.items, function (i, item) {
                var videoTitle = item.snippet.title.substring(8);
                var videoId = item.snippet.resourceId.videoId;
                $.get(
                    "https://www.googleapis.com/youtube/v3/videos", {
                    part: 'statistics',
                    id: videoId,
                    key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
                },
                function (data) {
                    $.each(data.items, function (i, item) {
                        var views = item.statistics.viewCount;
                        var output = '<li><a href=\"//www.youtube.com/embed/' + videoId + '?autoplay=1&showinfo=0&controls=0\"><h3>' + videoTitle + '</h3><small>' + views + '</small></a></li>';
                        $(mylist).append(output);
                    });
                });
            });
        });
    });
}

获取 playlistItems 的 viewCount，联合 HTTP 请求 youtube v3 + JQuery

Get viewCount for playlistItems, combined HTTP Requests youtube v3 + JQuery

javascript

jquery

xmlhttprequest

youtube-api

youtube-data-api