Как получать статистику просмотров канала YouTube на сайт?

Question

[Алекс]

Я пытаюсь получить количество просмотров канала youtube на сайт
Мне нужно связать html тэг <p id="youtubeRequest">1120</p> с реквестом, чтобы вместо вручную вбитого числа получать значение реквеста.

Я добавил вот этот код в мой HTML сразу после этого тэга:

<script>
   function getViews(params) {
     $.ajax({
       // я заменяю {} на API key и ID здесь
       url: "https://www.googleapis.com/youtube/v3/channels?part=statistics&key={MY_API_KEY}&id={MY_CHANELL_ID}",

      jsonp: "callback",
      dataType: "jsonp",


      success: function(response) {
       console.log(response);
       document.getElementById("youtubeRequest").innerHTML = response;  // не знаю как назначить response
      },

      error: function(response) {
       document.getElementById("youtubeRequest").innerHTML = "nope, doesn't work!";
    }
   });
   }
</script>

Я использую "browser API key". Деплой на хостинг не решает проблему (API key работает только с *.mysite.com/*), результат такой же как и на localhost. Я импортировал https://ajax.googleapis.com/ajax/libs/jquery/2.2.2...

Код не работает и не выдает даже ошибку в консоль, даже если я заменюdocument.getElementById на console.log("error") или alert("error")

Я не знаю причину почему этот JS код не работает. Как мне связать этот youtube api request с этим тэгом и заставить это работать?
Благодарю за помощь. Особенно, FireGM за пример кода

Answer 1

[Илья]

Смотрим, как делать запросы к апи
https://developers.google.com/youtube/v3/docs/chan...
Делаем запрос

https://www.googleapis.com/youtube/v3/channels?part=statistics&mine=true&key={YOUR_API_KEY}

Получить апикей
https://developers.google.com/youtube/v3/getting-s...

UPD:
Пример с jQuery. В success обработайте и вставьте куда надо

function getViews(params) {
  $.ajax({
    url: "https://www.googleapis.com/youtube/v3/channels?part=statistics&key={YOUR_API_KEY}&id={YOUR_CHANELL_ID}",

    jsonp: "callback",
    dataType: "jsonp",

    success: function( response ) {

        console.log( response ); 
    }
});
}

UPD2:

<script>
   function getViews(params) {
     $.ajax({
       // я заменяю {} на API key и ID здесь
       url: "https://www.googleapis.com/youtube/v3/channels?part=statistics&key={MY_API_KEY}&id={MY_CHANELL_ID}",

      jsonp: "callback",
      dataType: "jsonp",


      success: function(response) {
       console.log(response);
       document.getElementById("youtubeRequest").innerHTML = response.items[0].statistics.viewCount;  // Брать только количество просмотров
      },

      error: function(response) {
       document.getElementById("youtubeRequest").innerHTML = "nope, doesn't work!";
    }
   });
   }
getViews() //<--Вызвать функцию!!!
</script>

Comments

[Алекс]

А каким образом затем тянуть данные используя данный запрос? Я получил api key, но я начинающий и никогда не делал api запросы, если вам не сложно, не могли бы вы подсказать, как именно использовать данный запрос, т.е. в какой файл добавить данный запрос и как связать логику html тэга, на примере с данными поступающими от этого запроса

[Илья]

Алекс Алябьев: обновил

[Алекс]

FireGM: Спасибо за код! Правда, все еще не получается заставить его работать. Я обновил вопрос, если у вас буду мысли, буду рад комментам. Спасибо!

[Илья]

Алекс Алябьев: обновил. Вы в коде просто объявили функцию, а её ещё надо вызывать. Вставлять этот скрипт надо только после загрузки jQueryю

[Алекс]

FireGM: вау, все заработало, огромное спасибо! Это мой первый опыт работы с реквестами, JS и API, и теперь понял основные моменты как это работает, благодаря вам!

[ennoraths]

Илья: Можно узнать? Это получается аналитика лишь твоего канала, а можете предоставить пример к статистике другого канала? Либо же, авторизованного в вашем сайте другого канала. Работа через токен?

[Александр]

ennoraths: Да, там так просто не получишь. Как вариант самому монитроить статистику к каждому видео: кол-во просмотров, лайков и т.д.