P 2.5 Kommunikation
a) Ändern Sie ihre data.ts Datei so um, dass sie ausschließlich aus den JSON Daten besteht (und damit zur data.json wird).
b) Ändern Sie die Funktion, welche bisher die JSON Daten eingelesen hat, so um, dass diese zunächst über fetch aus dem Internet geladen werden. An diesem Punkt sollte die Seite wieder genauso wie letzte Woche funktionieren.
c) Fügen Sie der “Display Seite” (die in der alle ausgewählten Dinge gemeinsam am Ende angezeigt werden) eine Funktion hinzu, welche die Daten, die im Browsercache gespeichert sind, an die URL https://gis-communication.herokuapp.com verschickt und dessen JSON Antwort wohlformatiert auf Ihrer Webseite anzeigt. Die Antwort auf die erste Anfrage kann unter Umständen bis zu 15 Sekunden dauern, da der Server erst hochfahren muss.
Die möglichen Antworten der Seite sind entweder:
{
"error": "<Fehlermeldung hier>"
}
oder
{
"message": "<Nachricht des Servers hier>"
}
Formatieren Sie die Ausgaben unterschiedlich, je nach dem ob error oder message zurückgegeben wird.
Nutzen Sie diesen Codeschnipsel, um die Daten zu versenden (Erklärung dazu gibt es in der Lektion nächste Woche). Um die Antwort auszulesen, muss die letzte Zeile dieses Schnipsels verändert werden, wie es in der Lektion diese Woche dargestellt wurde. Außerdem müssen Sie browserCacheData mit dem Speichermedium Ihrer Wahl ersetzen. broswerCacheData sollte ein (komplexes) JS Objekt sein, also nicht nur eine Zahl oder String.
let query: URLSearchParams = new URLSearchParams(<any>browserCacheData);
url = url + "?" + query.toString();
await fetch(url);