Zu Handbuch Javascript-API

Golem.Api.Article.Top – Liste der beliebtesten Artikel holen

Mit der Klasse Golem.Api.Article.Top laden Sie eine Liste der zur Zeit meistgelesenen Artikel auf Golem.de

Inhalt

Einbindung

Javascript-Datei Golem/Api/Article/Top.js
Golem/Api/Article/Top-min.js
Package-Javascript-Datei Golem/Api/Article-full.js
Golem/Api/Article-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/Article/Top.js"></script>

Verwendung

Einfache Variante

Nehmen wir an, Sie wollen in einer leeren HTML-Liste die fünf meistgelesen Artikel auf Golem.de anzeigen. Der HTML-Code der Liste sieht wie folgt aus:

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

Der zugehörige Javascript-Code soll diese Liste mit den Überschriften der Artikeln füllen. Dem Construktor der Klasse Golem.Api.Article.Top übergeben Sie die Anzahl der gewünschten Artikel. Anschliessend rufen Sie die fetchEach()-Methode des Objektes auf. Als Parameter für den Aufruf wird eine Funktion übergeben, die für jeden Artikeleintrag aufgerufen wird.

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

var oTop = new Golem.Api.Article.Top(5);

oTop.fetchEach(addItem);
Beispiel 2: Abfrage für die 5 meistgelesenen Artikel

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

function addItem(article) {

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

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

 elItem.innerHTML = article.headline;

 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 oTop-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 Artikeleinträge benötigen, ohne sie gleich zu durchlaufen, können Sie auch die Methode getData() benutzen. Sie liefert alle Artikeleinträge in einem Array zurück.

Fehlerbehandlung

Während der Datenabfrage können Fehler auftreten:

  • Golem.Api.Article.Top.ERROR_LIMIT bedeutet, dass die angeforderte Länge der meistgelesenen Artikel 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 oTop-Objektes.


function handleError(errorCode, errorMessage) {

    var msg = '';

    switch(errorCode) {

        case Golem.Api.Article.Top.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 Artikeldaten

Für jeden Artikel werden folgende Eigenschaften mitgeliefert:

Name Bedeutung
articleid Artikel-Identifier
abstracttext Der Abstract des Artikels, eine Kurzzusammenfassung des Inhaltes
headline Die Überschrift des Artikels
date Das Veröffentlichungsdatum als UNIX-Timestamp in Millisekunden
url Die URL des Artikels
leadimg Ein Objekt-Literal mit den Daten des Headline-Bildes des Artikels. Die Eigenschaften des Objektes umfassen:
  • leadimg.url – Die URL des Bildes
  • leadimg.width – Die Breite des Bildes in Pixel
  • leadimg.height – Die Höhe des Bildes in Pixel

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/Article/Top.js"></script>
  <script type="text/javascript">

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

   var oTop = new Golem.Api.Article.Top(5);

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

  }
  
  function fillList() {

    this.each(addItem);

  }

  function addItem(article) {

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

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

   elItem.innerHTML = article.headline;

   elList.appendChild(elItem);

  }
  
  function handleError(errorCode, errorMessage) {

    var msg = '';

    switch(errorCode) {

        case Golem.Api.Article.Top.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="toplist">

  </ul>

 </body>

</html>


Zu Handbuch Javascript-API