YouTube API nextPageToken

我相當新的JavaScript，我有點卡在使用youTube API。我可以用我需要的數據得到結果，循環遍歷每個數據並顯示它們，但問題出在nextPageToken上。我似乎無法弄清楚爲什麼在使用nextPage標記的第二個搜索函數後，我無法放棄舊的標記，因此我得到了多個重複的結果。YouTube API nextPageToken

我登錄令牌看到並跟蹤他們，我總是得到前面的標識複製

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

來源

2017-06-26 dcdcc

您需要添加一個新的之前刪除您的單擊事件處理否則會積少成多，看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>

來源

2017-06-26 20:14:54

的.off（）方法是解決方案，我不知道的之前。謝謝！它正在工作。 – dcdcc

YouTube API nextPageToken

回答

相關問題