Die Ausgabe

Je nachdem, welcher Datentyp als Basis vorliegt, unterscheidet sich der Zugriff auf die Daten.

XML

Bei XML-Elementen kann mit der Methode getElementsByTagName() auf die unterschiedlichen Tags zugegriffen werden. Wichtig dabei ist, dass es immer die Mehrzahl ist (getElementsByTagName()). Dabei wird eine Liste aller gefundener Tags, mit dem Namen innerhalb der Klammer, zurückgegeben. Mit childNodes[0].nodeValue wird dann auf den eigentlichen Text zugegriffen.

Beispiel 1)

Dies ist eine ausführliche Form des Zugriffes, aufgeteilt in die einzelnen Schritte. Achtung, das dient nur dem Verständnis. Normalerweise schreibt man den Zugriff auf die Werte jedoch in einer Zeile, wie in Beispiel 2.

var buchArray = xmlData.getElementsByTagName("buch");
var titelArray = buchArray[0].getElementsByTagName("titel");
var output = titelArray[0].childNodes[0].nodeValue;
document.getElementById("ausgabe").innerText = output;
  1. Es wird auf die globale Variable mit den XML-Daten zugegriffen und alle Tags mit dem Namen "buch" in ein Array buchArray geschrieben.
  2. Aus dem buchArray wird das erste Element genommen und wiederum ein Array titelArray erstellt, in das alle Tags mit dem Namen "titel", die sich innerhalb des Arrays buchArray befinden, geschrieben werden.
  3. Von dem Array titelArray wird das erste Element genommen und auf den eigentlichen Text zugegriffen, um ihn in der Variable output zu speichern.
  4. Der Inhalt der Variable output wird auf der Webseite ausgegeben.

Grundsätzlich können alle Arrays mit einer Schleife durchsucht werden. Lediglich das Array der childNodes haben in der Regel nur einen Node. Trotzdem muss die 0 in diesem Fall angegeben werden. Überlegen Sie allgemein, wo genau ein Array ist, welches durchsucht werden muss.

Diese 4 Zeilen können jedoch auch auf 2 Zeilen verkürzt werden:

Beispiel 2) (Dieses Beispiel macht genau das gleiche wie das obige Beispiel!)

var output = xmlData.getElementsByTagName("buch")[0].getElementsByTagName("titel")[0].childNodes[0].nodeValue;
document.getElementById("ausgabe").innerText = output;

JSON

JSON ist dahingehend etwas verständlicher, da lediglich auf die einzelnen Objekte zugegriffen werden kann. Beachtet werden muss jedoch das buch-Array. Fehlt die Angabe über die konkrete Stelle innerhalb des Arrays (hier die 0), kann der Inhalt nicht gefunden werden.

var output = jsonData.bib.buch[0].titel;
document.getElementById("ausgabe").innerText = output;