Zu Handbuch Javascript-API

Golem.Api.Video.Latest – Liste der neusten Artikel holen

Mit der Klasse Golem.Api.Video.Top laden Sie eine Liste der zur Zeit meist gelesenen Videos auf Golem.de

Inhalt

Einbindung

Javascript-Datei Golem/Api/Video/Latest.js
Golem/Api/Video/Latest-min.js
Package-Javascript-Datei Golem/Api/Video-full.js
Golem/Api/Video-full-min.js
Erforderliche Klassen Golem.Request
Golem.Api
<!-- Erforderlich -->
<script type="text/javascript" src="http://api.golem.de/download/js/latest/Golem/Core-min.js"></script>

<!-- Klasse -->
<script type="text/javascript" src="http://api.golem.de/download/js/latest/Golem/Api/Video/Latest.js"></script>

Verwendung

Einfache Variante

Wir wollen in einer leeren HTML-Liste die fünf neusten Videos auf Golem.de anzeigen. Der HTML-Code der Liste sieht wie folgt aus:

<ul id="videolist">
</ul>
Beispiel 1: Leere HTML-Liste

Der zugehörige Javascript-Code soll diese Liste mit den Titeln der Videos füllen. Dem Construktor der Klasse Golem.Api.Video.Latest übergeben wir die gewünschten Anzahl der Videos. Anschliessend rufen wir die fetchEach()-Methode des Objektes auf. Als Parameter für den Aufruf wird eine Funktion übergeben, die für jeden Videoeintrag aufgerufen wird.

Golem.Request.KEY = '<ENTWICKLERSCHLÜSSEL>';

var request = new Golem.Api.Video.Latest(5);

request.fetchEach(addItem);
Beispiel 2: Abfrage für die 5 aktuellsten Videos

Unserer Methode zum Einfügen eines Listeneintrages wird ein Objekt-Literal übergeben mit den Video-Daten als Eigenschaften des Objektes.

function addItem(video) {

 var elList = document.getElementById('videolist');

 var elItem = document.createElement('LI');

 elItem.innerHTML = video.title;

 elList.appendChild(elItem);

}
Beispiel 3: Funktion zum Füllen der HTML-Liste

Andere Zugriffsformen

Die oben verwendete Methode fetchEach() ist eine vereinfachte Kombination der Methoden fetch() zum Holen der Daten und each() zum Durchlaufen. Wenn Sie Fehler bei der Datenabfrage abfangen wollen oder müssen, geht das nur bei der Verwendung von fetch().

Sie übergeben fetch() ein Objekt-Literal mit der Eigenschaft fnSuccess, der Sie eine entsprechende Funktion zuweisen:

oTop.fetch(
  {
    fnSuccess : fillList
  }
);
Beispiel 4: Abfrage mit fetch()

Innerhalb der Füll-Funktion können Sie die each()-Methode aufrufen. Die Füll-Funktion läuft dabei innerhalb des Scopes des request-Objektes, weshalb Sie each() über this referenzieren können. Als Parameter übergeben Sie der Methode eine Funktion, die für jeden zurückgelieferten Artikel aufgerufen wird.


function fillList() {

    this.each(addItem);

}
Beispiel 5: Funktion zur Auswertung der Ergebnisse

Wenn Sie lediglich die Videoeinträge benötigen, ohne sie gleich zu durchlaufen, können Sie auch die Methode getData() benutzen. Sie liefert alle Videoeinträge in einem Array zurück.

Fehlerbehandlung

Während der Datenabfrage können Fehler auftreten:

  • Golem.Api.Video.Latest.ERROR_LIMIT bedeutet, dass die angeforderte Länge der meistgesehenen Videos entweder zu klein ist (kleiner als 1) oder zu groß. Derzeit beträgt der größtmögliche Wert 50.

Um eine fehlerhafte Abfrage abzufangen, geben Sie bei der Methode fetch() eine Funktion für die Fehlerbehandlung an:

...
oTop.fetch(
    {
        fnSuccess : fillList,
        fnError   : handleError
    }
);
...
Beispiel 6: Abfrage ergänzt um die Fehlerbehandlung

Der Fehler-Funktion wird als erster Parameter der Fehlercode übergeben, als zweiter eine Fehlermeldung. Auch diese Funktion läuft innerhalb des Scopes des request-Objektes.


function handleError(errorCode, errorMessage) {

    var msg = '';

    switch(errorCode) {

        case Golem.Api.Video.Latest.ERROR_LIMIT :
            msg = 'Es wurden zu wenig oder zu viel Einträge angefordert';
            break;

        default :
            msg = 'Unbekannter Fehler!';
    }
    
    alert(msg);

}
Beispiel 7: Funktion zur Fehlerbehandlung

Verfügbare Videodaten

Für jedes Video werden folgende Eigenschaften mitgeliefert:

Name Bedeutung
videoid Video-Identifier
title Der Titel des Videos
url Die URL der Videoseite

Vollständiges Beispiel

<html>
 <head>
  <script type="text/javascript" src="http://api.golem.de/download/js/latest/Golem/Core-min.js"></script>
  <script type="text/javascript" src="http://api.golem.de/download/js/latest/Golem/Api/Video/Latest.js"></script>
  <script type="text/javascript">

  function start() {
   Golem.Request.KEY = '<ENTWICKLERSCHLÜSSEL>';

   var oRequest = new Golem.Api.Video.Latest(5);

   oRequest.fetch(
    {
        fnSuccess : fillList,
        fnError   : handleError
    }
   );

  }
  
  function fillList() {

    this.each(addItem);

  }

  function addItem(video) {

   var elList = document.getElementById('videolist');

   var elItem = document.createElement('LI');

   elItem.innerHTML = video.title;

   elList.appendChild(elItem);

  }
  
  function handleError(errorCode, errorMessage) {

    var msg = '';

    switch(errorCode) {

        case Golem.Api.Video.Latest.ERROR_LIMIT :
            msg = 'Es wurden zu wenig oder zu viel Einträge angefordert';
            break;

        default :
            msg = 'Unbekannter Fehler!';
    }

    alert(msg);

  }


  </script>
 </head>

 <body onload="start()">
 
  <ul id="videolist">

  </ul>

 </body>

</html>


Zu Handbuch Javascript-API