2
Je suis relativement nouveau dans javascript et je suis un peu bloqué dans l'utilisation de l'API YouTube. Je suis capable d'obtenir des résultats avec les données dont j'ai besoin, de passer en revue chacune d'entre elles et de les afficher, mais le problème est avec nextPageToken. Je n'arrive pas à comprendre pourquoi après la deuxième fonction de recherche avec le jeton NextPage, je suis incapable de rejeter l'ancien ainsi, je reçois plusieurs résultats en double.API YouTube nextPageToken
Je suis connecter les jetons pour voir et de les suivre et je reçois toujours le jeton précédent dupliqué
<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>
La méthode .off() est la solution, ce qui m'a ignorait auparavant. Merci! Cela fonctionne maintenant. – dcdcc