Google Books auslesen – oder jede andere JSON-API

29.11.2016 02:30 Uhr

Was bringt uns eine schöne Oberfläche, wenn sie keine Funktion hat? Herzlich wenig, daher müssen wir beginnen, externe Datenquellen anzubinden. Als Beispiel dient uns für unseren Kurs die API von Google Books. Wir werden diese Schnittstelle an unsere Oberflächen anbinden. Wie wir externe Daten nachladen, haben wir grundsätzlich schon gelernt. Doch wie laden wir eine konkrete API nach? Und wie werten wir die Daten aus? Fangen wir an, wir wollen Google Books auslesen.

Erst einmal der Grundbau

Wir starten mit einer einfachen Internetseite, die hier im Einzelnen nicht weiter wichtig ist. Innerhalb des Headers muss jQuery eingebunden sein. Der restliche Aufbau interessiert an dieser Stelle noch nicht. Lediglich ein Button mit der ID „btn“ ist wichtig, denn auf diese ID beziehen wir uns später in Javascript. Der konkrete Aufbau sieht wie folgt aus:

...
<button id="btn" type="button">Absenden</button>
<script>
        $(document).ready(function(){
            $('#btn').click(function() {

                $.ajax...

            });
        });
</script>
...

Das Script wartet also mit der Ausführung, bis das Dokument fertig geladen ist. Danach wartet es, bis der Button mit der ID „btn“ gedrückt wurde. Erst in diesem Augenblick wird der Ajax-Befehl abgesendet, der aber noch nicht weiter ausgeführt ist.

Bevor wir den Ajax-Befehl absenden, müssen wir uns anschauen, wie unser „Google Books auslesen“-Ziel erreichbar ist. Ein erster Blick sollte dabei immer in die Schnittstellenbeschreibung von Google gehen. Außerdem kann ein wenig Recherche auf anderen Webseiten nicht schaden, ein Blick lohnt meist zu StackOverflow, die auch hier ein Beispiel parat halten. Wir kommen daher sehr schnell an eine funktionierende URL, die uns passende Informationen zu Büchern liefert und im nächsten Beispiel genutzt wird.

Google Books auslesen – Es wird konkret

Innerhalb unserer „Google Books auslesen“-Routine verwenden wir jetzt den jQuery Befehl Ajax. Dabei übergeben wir die URL, die wir durch Recherche gefunden haben. Außerdem übergeben wir als Suchbegriff „UNIKOELN“.

...
$.ajax({
    url: 'https://www.googleapis.com/books/v1/volumes?q=UNIKOELN',
    method: 'GET',
    dataType: 'json'
}).done(function(data){

    // Innerhalb der Variablen "data" liegt nun das gesamte Ergebnis
    // Wir geben aber auf der Konsole nur die Eigenschaft "items" aus.
    // Wollen Sie die gesamte Ausgabe sehen, geben Sie nur "data" aus.
    console.log( data.items );

    // "items" ist ein Array mit allen Buechern, die wiederum als Objekte
    // gespeichert sind. Die Buecher werden in eine andere Variable
    // umkopiert.
    var arrBuecher = data.items;
    
    // gehe die Schleife durch alle Buecher durch.                
    for( var i = 0; i < arrBuecher.length; i++) {

        // Jedes Buchobjekt verfuegt ueber eine Eigenschaft "volumeInfo",
        // die wiederum ein Objekt ist. Dieses Objekt hat die Eigenschaft
        // "title". Wir koennen "einfach" bis dahin durchgreifen und den Titel
        // direkt ausgeben.
        console.log( arrBuecher[i].volumeInfo.title );

    }

}).fail(function() {
    alert('fehler');
    console.log('fehler');
});
...

Wir bekommen nun den Titel aller Bücher, die zu unserem Suchbegriff gefunden wurden, auf der Konsole ausgegeben. Wer die Schnittstelle Google Books auslesen möchte, der ist gut beraten, die Schnittstellenbeschreibung zu lesen. Es ist nicht ausgeschlossen, dass unser Script scheitert, weil eventuell nicht jedes Buch über die abgefragten Eigenschaften verfügt. Da wir die Schnittstelle aber nicht zur Verfügung stellen, müssen wir dies in der Dokumentation nachschauen.

Die wichtigste Änderung im Unterschied zum ersten Ajax-Versuch ist der geänderte „datatype“. Durch die Verwendung „json“ statt „text“ werden die übergebenen Daten direkt ausgewertet. Eine komplizierte Auswertung, früher „Handarbeit“, entfällt dadurch vollständig.

So geht es weiter

Was sollen wir mit den Daten anfangen? Es ist offensichtlich, dass kein User die Titel auf der Javascript-Konsole lesen will. Stattdessen werden wir die Titel in unserer jQuery Mobile Oberfläche angezeigt bekommen. Dazu müssen wir aus den Daten gültigen HTML-Code bauen und in unsere fertige Seiten-Schablone einfügen.

Außerdem wollen wir den Suchbegriff in einem Formularfeld festlegen. Immer nur nach „UNIKOELN“ suchen zu können, lässt den Spaß am Google Books auslesen schnell vergehen.