Zu Handbuch Javascript-API

Golem.Api.Article.Images – Bilder zu einem Artikel holen

Mit der Klasse Golem.Api.Article.Images laden Sie die Liste der Bilder, die zu einem Artikel gehören.

Inhalt

Einbindung

Javascript-Datei Golem/Api/Article/Images.js
Golem/Api/Article/Images-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/Images.js"></script>

Verwendung

Einfache Variante

Nehmen wir an, Sie wollen in einer leeren HTML-Liste die Bilder eines Artikels. Der HTML-Code der Liste sieht wie folgt aus:

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

Der zugehörige Javascript-Code soll diese Liste mit den Bildern in der Thumbnail-Ansicht füllen. Dem Construktor der Klasse Golem.Api.Article.Images übergeben Sie den Identifer des Artikels. 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 request = new Golem.Api.Article.Images(12345);

request.fetchEach(addItem);
Beispiel 2: Abfrage für die Bilder des Artikels

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

function addItem(image) {

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

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

 elItem.innerHTML = '<img src="'+image.small.url+'" width="'+image.small.width+'" height="'+image.small.height+'">';

 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:

request.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 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.Image.ERROR_INVALID_IDENTIFIER bedeutet, dass der Identifier des Artikels nicht korrekt aussieht oder kein Artikel für diesen Identifier existiert.

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

...
request.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.Article.Images.ERROR_INVALID_IDENTIFIER :
            msg = 'Der Artikel existiert nicht!';
            break;

        default :
            msg = 'Unbekannter Fehler!';
    }

    alert(msg);

}
Beispiel 7: Funktion zur Fehlerbehandlung

Verfügbare Artikeldaten

Für jedes Bild werden folgende Eigenschaften mitgeliefert:

Name Bedeutung
imageid Identifier des Bildes
subtext Der Abstract des Artikels, eine Kurzzusammenfassung des Inhaltes
small Ein Objekt-Literal mit den Daten des Bildes in der Thumbnail-Version. Die Eigenschaften des Objektes sind:
  • small.url – Die URL des Bildes
  • small.width – Die Breite des Bildes in Pixel
  • small.height – Die Höhe des Bildes in Pixel
medium Ein Objekt-Literal mit den Daten des Bildes in einer mittelgroßen Version. Die Eigenschaften des Objektes sind:
  • medium.url – Die URL des Bildes
  • medium.width – Die Breite des Bildes in Pixel
  • medium.height – Die Höhe des Bildes in Pixel
native Ein Objekt-Literal mit den Daten des Bildes in der Originalversion. Die Eigenschaften des Objektes sind:
  • native.url – Die URL des Bildes
  • native.width – Die Breite des Bildes in Pixel
  • native.height – Die Höhe des Bildes in Pixel



Zu Handbuch Javascript-API