文章/答案/技术大牛

发布

问YouTube API nextPageToken
EN

Stack Overflow用户

提问于 2017-06-26 09:07:38

回答 1查看 2.4K关注 0票数 3

我对javascript相当陌生，而且我还停留在使用youTube API上。我能够用我需要的数据获得结果，循环遍历并显示它们，但问题在于nextPageToken。我似乎不明白为什么在使用nextPage令牌的第二个搜索函数之后，我无法丢弃旧的搜索函数，因此，我得到了多个重复的结果。

我正在记录令牌以查看和跟踪它们，并且总是复制以前的令牌

<body>

 <div class="youtube-feed container">
  <script id="template" type=test/template>
    <div class="youtube-item">
        <a href="{{link}}" class="link">
            <img src="{{thumb}}" alt="">
        </a>
        <div class="info">
            <h6 class="title">{{title}}</h6>
            <p>{{channel}}</p>
            <p>{{views}}</p>
        </div>
    </div>
  </script>
</div>

<div class="button container">
 <a href="#" id="next">Next Page</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
 (function() {
    var query = 'Random search string',
        apiKey = 'api key here';

    getData();

    function getData() {
        $.get('https://www.googleapis.com/youtube/v3/search', {
            part: 'snippet, id',
            q: query,
            type: 'video',
            maxResults: 10,
            key: apiKey},
        function(data) {
            var nextToken = data.nextPageToken;
            $.each(data.items, function(i, item) {
                var resultsData = {
                    id: item.id.videoId,
                    title: item.snippet.title,
                    desc: item.snippet.description,
                    thumb: item.snippet.thumbnails.medium.url,
                    channel: item.snippet.channelTitle
                };

                $.get('https://www.googleapis.com/youtube/v3/videos', {
                    part: 'statistics',
                    id: resultsData.id,
                    key: apiKey},
                function(data) {
                    $.each(data.items, function(i, item) {
                        var views = item.statistics.viewCount;
                            resultsData.viewCount = views;
                    });
                    renderData(resultsData);
                });
            });
            nextButton(nextToken);
        });
    };

    function renderData(obj) {
        var template = $.trim($('#template').html()),
            dataVals = template.replace(/{{id}}/ig, obj.id)
                                .replace(/{{title}}/ig, obj.title)
                                .replace(/{{thumb}}/ig, obj.thumb)
                                .replace(/{{channel}}/ig, obj.channel)
                                .replace(/{{views}}/ig, obj.viewCount)
                                .replace(/{{link}}/ig, 'https://www.youtube/com/embed/' + obj.id);
        $(dataVals).appendTo('.youtube-feed');
    };

    function nextButton(token) {
        $('#next').on('click', function(e) {
            e.preventDefault();
            nextPage(token);
        });
    };

    function nextPage(token) {
        $.get('https://www.googleapis.com/youtube/v3/search', {
            part: 'snippet, id',
            q: query,
            type: 'video',
            maxResults: 2,
            pageToken: token,
            key: apiKey},
        function(data) {
            var nextToken = data.nextPageToken;
            $.each(data.items, function(i, item) {
                var resultsData = {
                    id: item.id.videoId,
                    title: item.snippet.title,
                    desc: item.snippet.description,
                    thumb: item.snippet.thumbnails.medium.url,
                    channel: item.snippet.channelTitle
                };

                $.get('https://www.googleapis.com/youtube/v3/videos', {
                    part: 'statistics',
                    id: resultsData.id,
                    key: apiKey},
                function(data) {
                    $.each(data.items, function(i, item) {
                        var views = item.statistics.viewCount;
                        resultsData.viewCount = views;
                    });
                    renderData(resultsData);
                });
            });
            nextButton(nextToken);
            console.log(nextToken);
        });
    };
 })();
</script>

</body>

javascript

jquery

html

youtube-api

youtube-javascript-api

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-26 20:14:54

在添加新的事件处理程序之前，需要删除单击事件处理程序，否则它们将加在一起，请参见this post：

$('#next').off('click').on('click', function(e) {
    e.preventDefault();
    nextPage(token);
});

下面是一个完整的示例，它还处理最后一个页面(当没有pageToken字段时)：

<body>

  <div class="youtube-feed container">
    <script id="template" type=test/template>
      <div class="youtube-item">
        <a href="{{link}}" class="link">
          <img src="{{thumb}}" alt="">
        </a>
        <div class="info">
          <h6 class="title">{{title}}</h6>
          <p>{{channel}}</p>
          <p>{{views}}</p>
        </div>
      </div>
    </script>
  </div>

  <div class="button container">
    <a href="#" id="next">Next Page</a>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script>
    (function() {
      var query = 'TANNOY dvs 6',
        apiKey = 'YOUR_API_KEY';

      var reachLastPage = false;

      getData();

      function getData() {
        $.get('https://www.googleapis.com/youtube/v3/search', {
            part: 'snippet, id',
            q: query,
            type: 'video',
            maxResults: 10,
            key: apiKey
          },
          function(data) {

            $.each(data.items, function(i, item) {
              var resultsData = {
                id: item.id.videoId,
                title: item.snippet.title,
                desc: item.snippet.description,
                thumb: item.snippet.thumbnails.medium.url,
                channel: item.snippet.channelTitle
              };

              $.get('https://www.googleapis.com/youtube/v3/videos', {
                  part: 'statistics',
                  id: resultsData.id,
                  key: apiKey
                },
                function(data) {
                  $.each(data.items, function(i, item) {
                    var views = item.statistics.viewCount;
                    resultsData.viewCount = views;
                  });
                  renderData(resultsData);
                });
            });

            if (data.nextPageToken) {
              console.log("go to token : " + data.nextPageToken);
              nextButton(data.nextPageToken);
            } else {
              console.log("no page left");
              reachLastPage = true;
            }
          });
      };

      function renderData(obj) {
        var template = $.trim($('#template').html()),
          dataVals = template.replace(/{{id}}/ig, obj.id)
          .replace(/{{title}}/ig, obj.title)
          .replace(/{{thumb}}/ig, obj.thumb)
          .replace(/{{channel}}/ig, obj.channel)
          .replace(/{{views}}/ig, obj.viewCount)
          .replace(/{{link}}/ig, 'https://www.youtube/com/embed/' + obj.id);
        $(dataVals).appendTo('.youtube-feed');
      };

      function nextButton(token) {
        $('#next').off('click').on('click', function(e) {
          e.preventDefault();
          if (!reachLastPage) {
            nextPage(token);
          } else {
            console.log("we already have reached last page!");
          }
        });
      };

      function nextPage(token) {
        $.get('https://www.googleapis.com/youtube/v3/search', {
            part: 'snippet, id',
            q: query,
            type: 'video',
            maxResults: 2,
            pageToken: token,
            key: apiKey
          },
          function(data) {

            $.each(data.items, function(i, item) {
              var resultsData = {
                id: item.id.videoId,
                title: item.snippet.title,
                desc: item.snippet.description,
                thumb: item.snippet.thumbnails.medium.url,
                channel: item.snippet.channelTitle
              };

              $.get('https://www.googleapis.com/youtube/v3/videos', {
                  part: 'statistics',
                  id: resultsData.id,
                  key: apiKey
                },
                function(data) {
                  $.each(data.items, function(i, item) {
                    var views = item.statistics.viewCount;
                    resultsData.viewCount = views;
                  });
                  renderData(resultsData);
                });
            });
            if (data.nextPageToken) {
              console.log("go to token : " + data.nextPageToken);
              nextButton(data.nextPageToken);
            } else {
              console.log("no page left");
              reachLastPage = true;
            }
          });
      };
    })();
  </script>

</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44756286

复制

相似问题

问YouTube API nextPageToken
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问YouTube API nextPageTokenEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问YouTube API nextPageToken
EN