Fatal编程技术网
  • javascript/
  • Javascript YouTube API nextPageToken

Javascript YouTube API nextPageToken

javascript jquery html youtube-api

Javascript YouTube API nextPageToken,javascript,jquery,html,youtube-api,youtube-javascript-api,Javascript,Jquery,Html,Youtube Api,Youtube Javascript Api,我对javascript相当陌生，而且我有点沉迷于使用youTube API。我能够用我需要的数据得到结果，循环遍历每个数据并显示它们，但问题在于下一个GetOken。我似乎不明白为什么在使用nextPage标记执行第二次搜索功能后，我无法放弃旧的搜索功能，因此，我得到了多个重复的结果 我正在记录令牌以查看和跟踪它们，并且我总是复制以前的令牌 <body> <div class="youtube-feed container"> <script id="te

我对javascript相当陌生，而且我有点沉迷于使用youTube API。我能够用我需要的数据得到结果，循环遍历每个数据并显示它们，但问题在于下一个GetOken。我似乎不明白为什么在使用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>


{{title}}
{{channel}}

{{views}

（功能（）{
变量查询='随机搜索字符串'，
apiKey='api key here'；
getData（）；
函数getData（）{
$.get（'https://www.googleapis.com/youtube/v3/search', {
部分：“代码段，id”，
问:质疑,，
键入：“视频”，
最大结果：10，
key:apiKey}，
功能（数据）{
var nextToken=data.nextPageToken；
$.each（data.items，function（i，item）{
var resultsData={
id:item.id.videoId，
标题：item.snippet.title，
desc:item.snippet.description，
thumb:item.snippet.thumbnails.medium.url，
频道：item.snippet.channelTitle
};
$.get（'https://www.googleapis.com/youtube/v3/videos', {
第:"统计数字",，
id:resultsData.id，
key:apiKey}，
功能（数据）{
$.each（data.items，function（i，item）{
变量视图=item.statistics.viewCount；
resultsData.viewCount=视图；
});
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/“+对象id）；
$（dataVals.appendTo（'.youtube提要'）；
};
功能下一个按钮（令牌）{
$（“#下一步”）。在（'click'，函数（e）{
e、 预防默认值（）；
下一页（代币）；
});
};
功能下一页（令牌）{
$.get（'https://www.googleapis.com/youtube/v3/search', {
部分：“代码段，id”，
问:质疑,，
键入：“视频”，
最大结果：2，
pageToken:token，
key:apiKey}，
功能（数据）{
var nextToken=data.nextPageToken；
$.each（data.items，function（i，item）{
var resultsData={
id:item.id.videoId，
标题：item.snippet.title，
desc:item.snippet.description，
thumb:item.snippet.thumbnails.medium.url，
频道：item.snippet.channelTitle
};
$.get（'https://www.googleapis.com/youtube/v3/videos', {
第:"统计数字",，
id:resultsData.id，
key:apiKey}，
功能（数据）{
$.each（data.items，function（i，item）{
变量视图=item.statistics.viewCount；
resultsData.viewCount=视图；
});
renderData（结果数据）；
});
});
下一个按钮（下一个按钮）；
控制台日志（nextToken）；
});
};
})();
在添加新的click事件处理程序之前，您需要先删除click事件处理程序，否则它们会累加，请参阅：

下面是一个完整的示例，它还涉及最后一页（当没有
pageToken
字段时）：


{{title}}
{{channel}}

{{views}

（功能（）{
var查询='TANNOY dvs 6'，
apiKey='您的API_密钥'；
var reachLastPage=false；
getData（）；
函数getData（）{
$.get（'https://www.googleapis.com/youtube/v3/search', {
部分：“代码段，id”，
问:质疑,，
键入：“视频”，
最大结果：10，
钥匙：apiKey
},
功能（数据）{
$.each（data.items，function（i，item）{
var resultsData={
id:item.id.videoId，
标题：item.snippet.title，
desc:item.snippet.description，
thumb:item.snippet.thumbnails.medium.url，
频道：item.snippet.channelTitle
};
$.get（'https://www.googleapis.com/youtube/v3/videos', {
第:"统计数字",，
id:resultsData.id，
钥匙：apiKey
},
功能（数据）{
$.each（data.items，function（i，item）{
变量视图=item.statistics.viewCount；
resultsData.viewCount=视图；
});
renderData（结果数据）；
});
});
if（data.nextPageToken）{
日志（“转到令牌：+data.nextPageToken”）；
nextButton（data.nextPageToken）；
}否则{
console.log（“没有剩余页面”）；
reachLastPage=true；
}
});
};
功能渲染数据（obj）{
变量模板=$.trim（$（'#模板'）.ht

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