Serverkommunikation mit Filterfunktion

Bei Ilias finden Sie einen Ordner namens Ajax_JSON_3Beispiele. Dort befinden sich die Dateien für eine Lösung mit Filterfunktion (Beispiel2.html und Beispiel2.js). Dies ist eine Erweiterung des ersten Beispiels, die hinzugefügten Codezeilen sind kommentiert.

Hier eine strukturierte Erklärung des hinzugefügten Codes:

Vorbereitung

Im ersten Beispiel werden alle Daten aus der JSON-Datei direkt beim Laden der Seite ausgegeben, das JSON-Objekt wird dabei als Parameter beim Funktionsaufruf übergeben. Da wir jedoch nun erst bei einer User-Anfrage auf bestimmte Funktionen zugreifen wollen, muss dies geändert werden.

Als Erstes wird die Zeile var heroes = jsonObj['members']; aus der Funktion showHeroes() herausgenommen, in die request.onload-Funktion gesetzt und das "var" gelöscht. Dadurch wird die Variable heroes, die das Array der Superhelden enthält, als globale Variable deklariert. Das ist sinnvoll, da man nun von jeder Stelle des Dokumentes darauf zugreifen kann und nicht nur innerhalb der Funktion ShowHero(). Nun ist die Parameterübergabe jsonObj überflüssig und es kann direkt auf die Variable superHeros, die sich bereits in der Funktion befindet, zugegriffen werden: heroes = superHeroes['members'];

Wie Sie sehen, ist im html-Dokument nun ein Button hinzugekommen. Um auf diesen Button zugreifen zu können, muss erst eine Variable mit der Referenz erstellt werden, wie es auch schon mit header und section gemacht wurde: var showAllButton = document.querySelector('button');

Nun kann die Funktion ShowAllHeroes() gestartet werden, sobald der Button geklickt wird. Dabei wird der Parameter in der Klammer nicht mehr gebraucht, da es nun die globale Variable dafür gibt. Der Funktionsaufruf von ShowHero() wird aus der request.onload-Funktion herausgenommen.

showAllButton.onclick = function () {
    showAllHeroes();
};

Filterfunktion

Im html-Dokument befindet sich jetzt auch ein Select-Feld:

<select onchange="GetHeroesOfUniverse(this.value)">
    <option value="">Universe</option>
    <option value="Marvel">Marvel</option>
    <option value="DC">DC</option>
    <option value="Custom">Custom</option>
</select>

Mit einem onchange-Eventhandler wird der ausgewählte Wert (value) als Parameter an die Funktion GetHeroesOfUniverse() weitergegeben. Mit this ist dabei immer das eigene Objekt, in dem Fall das Select-Feld, gemeint. Ist also die Option 'Marvel' ausgewählt, wird als Wert (this.value) die Zeichenkette "Marvel" an die Funktion übergeben.

Mit diesem Wert wird nun innerhalb einer vordefinierten Filterfunktion überprüft, welche Elemente aus dem heroes-Array mit dem ausgewählten Universum übereinstimmen. Diese Funktion gibt die Daten zurück, die der Bedingung entsprechen und erstellt damit ein neues Array (filteredArray). hero ist dabei ein Hilfsarray für diesen Vorgang. Das ursprüngliche heroes-Array bleibt dabei vollkommen unangetastet. Weitere Informationen dazufinden Sie hier.

    var filteredArray = heroes.filter(function (hero) {
        return hero.universe === selectedUniverse;
    });

Da das neue Array nur die Daten enthält, die gebraucht werden, kann damit genauso verfahren werden, wie mit dem ursprünglichen heroes-Array, indem alle Daten mit einer for-Schleife ausgegeben werden. Es muss lediglich der Name des zu durchsuchenden Arrays geändert werden:

    for(var i = 0; i < filteredArray.length; i++) {
        var myMainArticle = document.createElement('article');
        var myH2 = document.createElement('h2');
        var paraSecretIdentity = document.createElement('p');
        var paraAge = document.createElement('p');
        var paraSuperpower = document.createElement('p');
        var myPowerList = document.createElement('ul');

        myH2.textContent = filteredArray[i].name;
        paraSecretIdentity.textContent = 'Secret identity: ' + filteredArray[i].secretIdentity;
        paraAge.textContent = 'Age: ' + filteredArray[i].age;
        paraSuperpower.textContent = 'Superpowers:';

        var superPowers = filteredArray[i].powers;
        for (var j = 0; j < superPowers.length; j++) {
            var listItem = document.createElement('li');
            listItem.textContent = superPowers[j];
            myPowerList.appendChild(listItem);
        }

        myMainArticle.appendChild(myH2);
        myMainArticle.appendChild(paraSecretIdentity);
        myMainArticle.appendChild(paraAge);
        myMainArticle.appendChild(paraSuperpower);
        myMainArticle.appendChild(myPowerList);

        section.appendChild(myMainArticle);

    }

Um zu vermeiden, dass die ausgewählten Ergebnisse bei jedem neuen Aufruf unter den bisherigen Elementen erstellt werden, wird die section vor jeder Neubelegung geleehrt: section.innerHTML = "";