Zugriff auf Datenquellen
Dauer: 10 Minuten
Themen:
- statisches Array als „lokale Datenquelle“
Ziel: Schrittweise Datenquellen einbinden
In einer Webanwendung werden häufig Daten von externen Quellen wie z.B. andere Webservices oder Cloud-Datenbanken angefragt und eingebunden.
Bei einem schrittweisen Vorgehen kann es bereits nützlich sein, die Daten zunächst lokal im Code als Objekte in einem Array zu definieren.
Lokale Daten als Objekte in einem Array
Zunächst erstellen wir eine „lokale Datenquelle“, indem wir ein Array mit Beispiel-Daten deklarieren, z.B. Objekte für Orte, die aus einem Namen und der Temperatur bestehen:
// Array mit Temperaturwerten für die Orte im select-Element
const temperatures = [
{ name: 'Hamburg', temp: 2 },
{ name: 'Paris', temp: 4 },
{ name: 'New York', temp: -1 },
{ name: 'Sydney', temp: 20 },
];In der Wetteranwendung wird das Array temperatures benutzt,
um bei eingegebenem Suchtext im Textfeld (input-Element) oder bei
Auswahl eines Ortes in der Dropdown-Liste (select-Element) die Daten
aus dem Array zu lesen.
Wenn eine solche „lokale Datenquelle“ im Code genutzt wird, dann ist der Code bereits so strukturiert, dass diese schrittweise durch eine „echte“ Datenquelle (z.B. aus einem Webservice) ersetzt werden kann.
Tipp: Faker ist eine JavaScript-Bibliothek, die zufällige Daten für verschiedene Anwendungsfälle erzeugen kann.