Несколько запросов JQuery в Html Youtube Channel Counter

Question

Я хочу создать простой личный счетчик на YouTube, чтобы видеть подписчиков, видео и т. Д. И сравнивать их с другими каналами.Моя проблема в том, что я знаю, как получить информацию с 1 канала, но не с нескольких.

Код:

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 , потому что это как-тоНеправильный формат здесь.

У меня есть функция, которая вызывает API Google и возвращает статистику канала, но как я могу выдать несколько запросов в html?

Когда у меня есть 3 канала, он переопределяет предыдущий канали так далее ...

Answer 1

Если вы хотите иметь более одного счетчика для каждого канала Youtube, который хотите предоставить, вы все равно можете использовать предоставленный вами код, но я внес несколько изменений:

• Добавлен div, предназначенный для показаИнформация (в данном случае, видео, подписчики и счетчики видео) канала YouTube.
• Вызовите info и передайте желаемый идентификатор канала YouTube, чтобы получить информацию о количестве.

В этом примере я добавил три канала:

• PewDiePiew (это идентификатор канала, который у вас есть в вашем вопросе) .
• Microsoft HoloLens
• TED Talk

Из указанных каналов будет получен следующий код:

• Количество подписчиков
• Количество просмотров
• Количество видео

// 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>