YouTube API nextPageToken
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了YouTube API nextPageToken相关的知识,希望对你有一定的参考价值。
我是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>
答案
您需要删除点击事件处理程序,然后才能添加新的处理程序,否则它们会加起来,请参阅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>
以上是关于YouTube API nextPageToken的主要内容,如果未能解决你的问题,请参考以下文章
我只(总是)为 Youtube Data Api v3 获得 10 个 nextpagetoken;我怎样才能增加这个?
YouTube Data Api:如果达到配额限制,则打破 nextPageToken while 循环?
如何使用 youtube data api v3 中的 nextPageToken 在 android recycler 视图中加载更多视频