javascript - Html Youtube channel 计数器中的多个请求JQuery

Question

我想制作一个简单的私有(private) youtube 计数器来查看订阅者、视频等并将它们与其他 channel 进行比较。我的问题是，我知道如何从 1 个 channel 而不是多个 channel 获取信息。

代码:

function info(cid) {
    $.get("https://www.googleapis.com/youtube/v3/channels", {
            part: 'statistics',
            id: cid,
            key: 'Super Secret Key'
        },
        function(data) {
            $.each(data.items, function(i, item) {

                var subs = item.statistics.subscriberCount
                var views = item.statistics.viewCount
                var videos = item.statistics.videoCount
            })
        }
    );
}
$(document).ready(function(e) {
    window.setInterval("info('UC-lHJZR3Gqxm24_Vd_AJ5Yw')", 1000);
})

我上传到 PasteBin ，因为它在这里的格式不正确。

我有一个调用 google API 并返回 Channel stats 的函数，但是如何在 html 中发出多个请求？

当我有 3 个 channel 时，它会覆盖前一个 channel ，依此类推......

Answer 1

如果您希望为每个要提供的 Youtube channel 提供多个计数器，您仍然可以使用您提供的代码，但我做了一些修改:

添加了一个 div 专门用于显示 youtube channel 的信息(在本例中为视频、订阅者和视频计数器)。

调用 info函数并传递您想要获取计数信息的 youtube channel ID。

在此示例中，我添加了三个 channel :

PewDiePiew(这是您在问题中的 channel ID)。

微软 HoloLens

TED演讲

从上述 channel ，将获得以下代码:

订阅人数

查看次数

视频数

// Please note, this is a youtube api key founded on intenet, use your own Youtube api key.
function info(cid, div_id, channel_name) {
  $.get("https://www.googleapis.com/youtube/v3/channels", {
      part: 'statistics',
      id: cid,
      key: 'AIzaSyBMdBIAc5VmMNV6M7aCwsKmQH8Yf4ctHmc'
    },
    function(data) {
      $.each(data.items, function(i, item) {
        if (document.getElementById(div_id) != undefined) {
          document.getElementById(div_id).innerHTML = "Channel name: " + channel_name + "<br/>" +
            "item.statistics.subscriberCount: " + item.statistics.subscriberCount + "<br/>" +
            "item.statistics.viewCount: " + item.statistics.viewCount + "<br/>" +
            "item.statistics.videoCount: " + item.statistics.videoCount;
        }
      })
    }
  );
}
$(document).ready(function(e) {
  window.setInterval("info('UC-lHJZR3Gqxm24_Vd_AJ5Yw', 'div_pewdiepiew', 'PewDiePiew')", 1000);
  window.setInterval("info('UCT2rZIAL-zNqeK1OmLLUa6g', 'div_microsoftHoloLens', 'Microsoft HoloLens')", 1000);
  window.setInterval("info('UCAuUUnT6oDeKwE6v1NGQxug', 'div_TEDTalks', 'TED Talks')", 1000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<div id="div_pewdiepiew">
</div>
<hr/>
<div id="div_microsoftHoloLens">
</div>
<hr/>
<div id="div_TEDTalks">
</div>