CPSC 1520 Assignment 2: Top-Alben-Filterung mit JavaScript und Fetch API

Einleitung: Warum dieses Projekt dein Verständnis von asynchronem JavaScript vertieft

Stell dir vor, du entwickelst eine App wie Spotify oder Apple Music – nur dass du statt Millionen von Songs die Top-Alben einer Community anzeigst. Genau das ist das Ziel von CPSC 1520 Assignment 2. Du lernst, wie du Daten von einem RESTful API abrufst, diese filterst und dynamisch in einer Tabelle darstellst. Das ist eine Kernkompetenz für jeden Webentwickler – egal ob du später an KI-gestützten Empfehlungssystemen, Finanz-Dashboards oder Gaming-Statistiken arbeitest.

In dieser Anleitung zeige ich dir Schritt für Schritt, wie du die geforderten Aufgaben umsetzt: vom Fetch der Album-Daten über die Filterung nach Suchbegriff und Mindestbewertung bis hin zum Sortieren per Klick. Dabei verwenden wir ausschließlich semantisches HTML und modernes JavaScript – genau wie von deinem Dozenten erwartet.

1. Grundlagen: Die Fetch API und asynchrone Datenabfrage

Bevor wir loslegen, ein kurzer Blick auf die Fetch API. Sie ist der moderne Weg, HTTP-Anfragen zu stellen – ähnlich wie du es vielleicht von axios kennst, aber ohne externe Bibliothek. Wir nutzen async/await, um den Code lesbarer zu machen.

1.1 Funktion zum Abrufen der Album-Daten

async function fetchAlbums() {
    const response = await fetch('http://localhost:3000/albums');
    const data = await response.json();
    return data;
}

Erklärung: Die Funktion fetchAlbums ist async, weil sie eine asynchrone Operation ausführt. Mit await warten wir auf die Antwort des Servers und wandeln sie dann in JSON um. Die zurückgegebenen Daten sind ein Array von Album-Objekten – genau das, was wir für die Tabelle brauchen.

1.2 Daten beim Laden der Seite abrufen

Damit die Alben sofort angezeigt werden, wenn der Benutzer die Seite öffnet, rufen wir fetchAlbums auf und speichern die Daten in den Variablen topAlbums und topAlbumsFiltered. Das machen wir am besten mit einem DOMContentLoaded-Event:

let topAlbums = [];
let topAlbumsFiltered = [];

document.addEventListener('DOMContentLoaded', async () => {
    topAlbums = await fetchAlbums();
    topAlbumsFiltered = [...topAlbums];
    renderAlbums(topAlbumsFiltered);
});

Hinweis: topAlbumsFiltered wird mit einer Kopie von topAlbums initialisiert, damit später die Filterung auf dieser Kopie basiert und die Originaldaten erhalten bleiben.

2. Alben in einer HTML-Tabelle rendern

Jetzt müssen wir die Alben in einer Tabelle darstellen. Dafür verwenden wir die map-Methode – ein zentrales Werkzeug in JavaScript für Anfänger und Fortgeschrittene. Die Tabelle hat Spalten für Album-Name, Künstler, Bewertung, Anzahl der Reviews und Erscheinungsjahr.

2.1 HTML-Grundgerüst der Tabelle

<table id="albums-table">
    <thead>
        <tr>
            <th>Album Name</th>
            <th>Artist Name</th>
            <th id="sort-rating">Average Rating &uarr;&darr;</th>
            <th id="sort-reviews"># of Reviews &uarr;&darr;</th>
            <th id="sort-year">Release Date</th>
        </tr>
    </thead>
    <tbody id="albums-body"></tbody>
</table>

Beachte die id-Attribute in den Kopfzellen für die Sortierfunktion – das kommt später im Bonus-Teil.

2.2 Rendern mit map

function renderAlbums(albums) {
    const tbody = document.getElementById('albums-body');
    tbody.innerHTML = albums.map(album => `
        <tr>
            <td>${album.albumName}</td>
            <td>${album.artistName}</td>
            <td>${album.averageRating.toFixed(1)}</td>
            <td>${album.numberOfReviews}</td>
            <td>${album.releaseYear}</td>
        </tr>
    `).join('');
}

Wichtig: map erzeugt ein Array von HTML-Strings, die wir mit .join('') zu einem einzigen String verbinden. So vermeiden wir unnötige DOM-Operationen und die Tabelle wird schnell aufgebaut.

3. Filterfunktionen: Suche und Mindestbewertung

Der zweite große Teil des Assignments ist die Filterung. Der Benutzer soll nach Album- oder Künstlernamen suchen können (case-insensitive) und eine Mindestbewertung festlegen. Beide Filter sollen kombinierbar sein – wie bei einer E-Commerce-Suche oder einer Filmdatenbank.

3.1 Event Listener für das Formular

document.getElementById('filter-form').addEventListener('submit', (event) => {
    event.preventDefault();
    const searchQuery = document.getElementById('search-input').value.trim();
    const minRating = parseFloat(document.getElementById('rating-input').value) || 0;
    
    let filtered = [...topAlbums];
    if (searchQuery) {
        filtered = filterBySearch(filtered, searchQuery);
    }
    if (minRating > 0) {
        filtered = filterByMinRating(filtered, minRating);
    }
    topAlbumsFiltered = filtered;
    renderAlbums(topAlbumsFiltered);
});

Erklärung: Wir verhindern das Standard-Absenden des Formulars, holen die Werte aus den Eingabefeldern und wenden die Filter nacheinander an. Die Filterfunktionen werden nur aufgerufen, wenn der entsprechende Eingabewert nicht leer ist.

3.2 Filterfunktion für die Suche

function filterBySearch(albums, query) {
    const lowerQuery = query.toLowerCase();
    return albums.filter(album =>
        album.albumName.toLowerCase().includes(lowerQuery) ||
        album.artistName.toLowerCase().includes(lowerQuery)
    );
}

Case-Insensitivity: Durch Umwandeln beider Strings in Kleinbuchstaben mit toLowerCase() wird die Suche unabhängig von der Groß-/Kleinschreibung.

3.3 Filterfunktion für die Mindestbewertung

function filterByMinRating(albums, minRating) {
    return albums.filter(album => album.averageRating >= minRating);
}

Hier filtern wir alle Alben, deren averageRating größer oder gleich dem eingegebenen Wert ist. Beachte: Der Wert wird als Zahl übergeben, daher verwenden wir >=.

4. Bonus: Sortieren durch Klick auf Spaltenüberschriften

Im Bonus-Teil soll das Sortieren der Tabelle durch Klick auf die Überschriften „Average Rating“ und „# of Reviews“ implementiert werden. Das ist eine typische Funktion in Daten-Tabellen – ähnlich wie in Google Sheets oder Excel.

4.1 Event Listener für die Kopfzellen

document.getElementById('sort-rating').addEventListener('click', () => {
    sortAlbums('averageRating', true);
});

document.getElementById('sort-reviews').addEventListener('click', () => {
    sortAlbums('numberOfReviews', true);
});

document.getElementById('sort-year').addEventListener('click', () => {
    sortAlbums('releaseYear', true);
});

4.2 Sortierfunktion

function sortAlbums(key, ascending = true) {
    topAlbumsFiltered.sort((a, b) => {
        if (ascending) {
            return a[key] - b[key];
        } else {
            return b[key] - a[key];
        }
    });
    renderAlbums(topAlbumsFiltered);
}

Hier sortieren wir das Array topAlbumsFiltered direkt. Standardmäßig sortieren wir aufsteigend; durch einen Klick auf die gleiche Spalte könnte man die Richtung umkehren – das wäre eine Erweiterung, die du selbst umsetzen kannst.

5. Tipps zur Code-Qualität und Fehlervermeidung

Dein Dozent wird auf sauberen Code achten. Hier ein paar Hinweise:

Variablenbenennung: Verwende aussagekräftige Namen wie topAlbums, nicht data1.
Keine globalen Variablen außer den notwendigen topAlbums und topAlbumsFiltered.
Fehlerbehandlung beim Fetch: Füge einen try/catch-Block hinzu, um Netzwerkfehler abzufangen.
Kommentare nur da, wo es nötig ist – der Code sollte selbsterklärend sein.

6. Zusammenfassung und Ausblick

Mit dieser Anleitung hast du alle geforderten Aufgaben von CPSC 1520 Assignment 2 umgesetzt: Datenabruf mit Fetch API, Rendern mit map, Filterung nach Suchbegriff und Mindestbewertung sowie Sortieren per Klick. Diese Techniken sind grundlegend für jeden, der Webentwicklung mit JavaScript lernt – ob für dynamische Dashboards, interaktive Listen oder Echtzeit-Filter in Apps.

Probier auch die Challenge-Aufgabe: Sortieren nach Erscheinungsdatum. Viel Erfolg bei deinem Assignment!