Verwenden von youtube api zum Abrufen von Playlist-Elementen. Es gibt mehr als 50 in der Liste, also müssen Sie eine Schleife erstellen, um sie zu bekommen. Wenn eine Schaltfläche angeklickt wird, rufe ich eine Funktion auf, die jeweils 50 Zeichen zurückgibt und dann eine Schleife erstellt, um alle Elemente zu erhalten.Youtube api - Wie kommt man zum nextpage token von fuction?
Probleme beim Zurückgeben der nächstenpagetoken aus der Funktion. Ich konnte keinen Weg finden, die Daten zurückzugeben, also kam ich an den Punkt, an dem ich gerade das nächste Seitentoken in das HTML eines div innerhalb der Funktion eingefügt habe, aber sobald die Funktion beendet ist, versuche ich den html Wert zu erhalten leer.
Die console.log ('NextpageToken:' + data.nextPageToken); Befehl zeigt den korrekten Wert an.
Die console.log ('Nach dem Anruf:' + next); Befehl zeigt einen leeren Wert an.
Der Befehl 'Nach dem Aufruf' wird auch im Konsolenprotokoll vor dem Protokoll 'Nextpagetoken' angezeigt.
Jede Hilfe sehr erhalten. Hier ist der JavaScript und HTML:
$(document).ready(function()
{
var loop=0;
var data;
var next='';
$('#get').click(function(){
getVids();
next=$('#pagetoken').text();
console.log('After call: ' + next);
});
function getVids(page){
$('#results').html("");
data = {
part: 'snippet',
maxResults: 50,
playlistId: 'playlist',
key: 'myKey',
pageToken: page
};
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems", data,
function(data){
var output;
console.log('Page: ' + data.nextPageToken);
$.each(data.items, function(i, item)
{
console.log(item);
videoTitle = item.snippet.title;
rvideoID = item.snippet.resourceId.videoId;
vidThumburl = item.snippet.thumbnails.high.url;
output = '<li style="list-style:none;">' + rvideoID + ' <a class="videos2 video" href="https://www.youtube.com/watch?v=' + rvideoID + '">' + videoTitle + '<a/></li>';
//Append to results list
$('#results').append(output);
});
console.log('Nextpagetoken: ' + data.nextPageToken);
$('#pagetoken').html(data.nextPageToken);
});
}
});
Hier ist der html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="yt.js"></script>
</head>
<body>
<div id="container">
<button id='get' type="button" class="btn btn-primary">Go</button>
<ul id="results"></ul>
<div id='pagetoken'></div>
</div>
</div>
</body>
</html>