Details zur Eurostat API

BIP, Staatsverschuldung und Arbeitslosigkeit der 27 EU-Länder

CORS und API.

Die Statistics-API von Eurostat, die Daten im JSON-stat-Format bereitstellt, unterstützt CORS offiziell. Das bedeutet, dass du direkt aus deiner Webanwendungen (z. B. JavaScript-Anfragen aus dem Browser) auf die Datenbanken von Eurostat zugreifen kannst, ohne auf Sicherheitsbeschränkungen zu stoßen. CORS (Cross-Origin Resource Sharing) ganz kurz erläutert: Wenn deine Webseite Daten von einer (API)-Domain anfordert, hängt der Browser spezielle Informationen an die Anfrage. Antwortet der Server positiv, erlaubt der Browser den Datenaustausch. Wenn der Server die (API)-Domain nicht freigibt oder ablehnt, blockiert der Browser die Daten und wirft einen sogenannten CORS-Fehler (CORS Error).

Bruttoinlandsprodukt (BIP).

Das Bruttoinlandsprodukt (BIP) misst den Gesamtwert aller Waren und Dienstleistungen, die innerhalb eines Jahres innerhalb der Landesgrenzen einer Volkswirtschaft für den Endverbrauch hergestellt wurden. Es ist das wichtigste Maß, um die wirtschaftliche Leistungsfähigkeit und das Wirtschaftswachstum eines Landes zu bestimmen.

Für den europäischen Vergleich stellt Eurostat umfangreiche Datenbanken bereit. Globale Daten und Prognosen werden unter anderem vom Internationalen Währungsfonds (IWF) oder der Weltbank veröffentlicht.

Diese Webseite gibt eine Hilfe, wie man mit den Werkzeugen HTML, CSS und JavaScript Daten vom Eurostat-Server zur eigenen Anwendung bekommt und in tabellarische Form visualisiert. Mit Hilfe der API (Application Programming Interface oder Programmierschnittstelle) und URL (Uniform Resource Locator - eindeutige Adresse einer Ressource) transferieren wir diese Daten zum privaten (nichtkommerziellen) Gebrauch. In einer API-URL ist nicht nur eine Adresse hinterlegt, sondern auch Informationen über die Daten selbst: Was für Daten? Welches Format? Welche Einheit und …. und.

Quält man sich durch die Eurostat-Webseite, auf der Suche nach API-Dokumentationen, dann lässt die Konzentration sehr schnell nach. Aber man ist dann schon ein Europameister in Mausklicks! Letztendlich erhält man den Hinweis, dass die Nutzung einer JSONstat-Bibliothek eine gute Option ist. Natürlich, keine Frage. Aber ich möchte das nicht.

1️⃣ Eurostat-API-URL (Uniform Resource Locator). Eindeutige Adresse für die Anforderung des Bruttoinlandsproduktes der 27 EU-Mitgliederstaaten. Um eine Seite im Internet aufzurufen, übersetzt der Webbrowser die URL und navigiert direkt zum gewünschten Zielort. Der Empfänger, hier ein Eurostat-Server, prüft die Adresse auf Plausibilität und sendet Daten im JSON-Format zurück. JavaScript steuert mit der Funktion fetch() diesen Vorgang. Die Funktion fetch() baut eine Verbindung zum Server auf. Da das Laden von Daten über das Netzwerk immer etwas Zeit in Anspruch nimmt, liefert fetch() nicht sofort die Daten zurück, sondern ein sogenanntes Promise (ein "Versprechen", dass das Ergebnis später geliefert wird). JavaScript führt diese Netzwerkoperationen asynchron durch, was bedeutet, dass die restliche Webseite oder App flüssig weiterläuft, während im Hintergrund auf die Antwort des Servers gewartet wird. Weiterhin enthält die URL wichtige Schlüsselwörter, die wir näher untersuchen.

2️⃣ Fester Teil der Adresse. Muss immer so beginnen. Darf nicht geändert werden. 3️⃣ Gehört noch zum festen Teil. Service, Version und Response (Antwort / Reaktion).

4️⃣ Die Abkürzung nama_10_gdp steht in der Eurostat-Datenbank für National Accounts (nama) - Annual (10) - Gross Domestic Product (gdp). Es handelt sich um einen der wichtigsten Datensätze für makroökonomische Analysen. Hier sind die wichtigsten Details zum Verständnis: Die Bedeutung der Abkürzung aufgeschlüsselt NAMA: National Accounts – Main Aggregates (Volkswirtschaftliche Gesamtrechnungen – Hauptaggregate). 10: Bezieht sich auf jährliche Daten (annual). GDP: Gross Domestic Product (Bruttoinlandsprodukt - BIP). Der Datensatz liefert umfassende, jährliche Daten zum Bruttoinlandsprodukt (BIP).

5️⃣ Der Parameter ?format=JSON in einer Webadresse (URL) teilt einem Server mit, dass die angeforderten Informationen im JSON-Format (JavaScript Object Notation) geliefert werden soll.

6️⃣ CP_MEUR Current Prices, Million EURO – Angaben in jeweiligen Preisen (nominal), gemessen in Millionen. Beispiel: Das Bruttoinlandsprodukt (BIP) von Deutschland lag im Jahr 2025 bei 4.469,8 Milliarden Euro. In Worten ausgedrückt sind das: Vier Billionen vierhundertneunundsechzig Milliarden und achthundert Millionen Euro.

7️⃣ Im Eurostat-Datenbestand steht der Parameter na_item=B1GQ für das Bruttoinlandsprodukt (BIP) zu Marktpreisen (auf Englisch: Gross domestic product at market prices).Es ist der zentrale Indikator zur Messung der wirtschaftlichen Gesamtleistung und der Wertschöpfung einer Volkswirtschaft innerhalb eines bestimmten Zeitraums.

8️⃣ &freq=A. Die Abkürzung steht für Frequency (Häufigkeit), und der Wert A steht in der Regel für Annual (jährlich).

Hinweis zu Position1️⃣: In JavaScript muss die URL in einfache Anführungszeichen ' ' (auch als Single Quotes bezeichnet) eingebettet sein! Weiterhin kannst du den obigen String, ohne Anführungszeichen, in die Adress- Befehlszeile des Browsers eingeben. Dann erhältst du die kompletten Eurostat-JSON-Daten. Weiterhin wird im Anzeigefeld des Browsers ein Schalter eingeblendet, durch Anklicken werden die API-Daten formatiert, dass erhöht die Lesbarkeit der Daten. Zumindest ist das bei meinem Lieblingsbrowser, Google Chrome, so! Es ist schon sehr hilfreich, besonders für die nachfolgenden Informationen, sich einen Überblick zu verschaffen, was da auf dich zukommt.

Wie selektiert man das BIP aus einer API-Liste mit 2000 Zeilen? Vorher wurde die Liste vom Eurostat-Server in den Webbrowser mit JavaScript eingelesen.

Das Format, das Eurostat verwendet (genannt JSON-stat), ist berüchtigt dafür, beim ersten Anschauen Kopfschmerzen zu verursachen. Es ist darauf optimiert, möglichst wenig Speicherplatz zu verbrauchen, nicht darauf, für Menschen leicht lesbar zu sein. Lass uns das Schritt für Schritt und ganz ohne Code-Fachchinesisch aufschlüsseln. Wir analysieren den „Rangiervorgang“ mit einem Datensatz von CY-Zypern!

Das Problem: Die Daten liegen in getrennten Schubladen. Normalerweise erwartet man bei einer API-Antwort so etwas wie:„Zypern: 2024: 30 Milliarden €“ Eurostat macht das anders. Eurostat liefert dir drei getrennte Listen (Schubladen):
1️⃣ Eine Liste aller Länder (z. B. [AT, BE, BG, ..., CY, ...]).
2️⃣ Eine riesige, flache Liste mit allen Zahlen hintereinander geklatscht (z. B. [1234, 5678, 91011, ...]).
3️⃣ Das Geheimnis ist nun: Die Zahl für Zypern steht nicht beim Wort „Zypern“, sondern wir müssen die Position (den Index) von Zypern und dem Jahr berechnen, um an die richtige Stelle in der riesigen Zahlenliste zu springen.

Schritt 1: Wo in der Liste steht Zypern? Der Länder-Index. Zuerst schauen wir in die "Schublade" der Länder (dimension.geo.category.index). Eurostat listet dort alle Länder auf und gibt ihnen eine fortlaufende Nummer (einen Index), beginnend bei 0. Nehmen wir an, die Liste sieht gekürzt so aus: Belgien (BE) = 0 ; Bulgarien (BG) = 1 ; ... ; Zypern (CY) = 5 . JavaScript merkt sich also: Zypern hat die Position 5.

Schritt 2: Wo in der Liste steht das Jahr? Der Jahres-Index. Das Gleiche machen wir mit den Jahren (dimension.time.category.index). Wir sortieren die Jahre und nehmen das aktuellste (z. B. 2024). Auch die Jahre sind durchnummeriert: 2020 = 0 ; 2021 = 1 ; 2022 = 2 ; 2023 = 3 ; 2024 = 4 JavaScript merkt sich: Das gewünschte Jahr hat die Position 4. Zudem zählen wir, wie viele Jahre es insgesamt gibt – sagen wir, es sind insgesamt 5 Jahre in der Datenbank.

Schritt 3: Das Rechnen. Die Brücke zur Zahl. Jetzt kommt der Knackpunkt. In der riesigen Zahlenliste (data.value) liegen die Daten Block für Block. Die ersten 5 Zahlen gehören zu Belgien (für die Jahre 2020 bis 2024). Die nächsten 5 Zahlen gehören zu Bulgarien. Und so weiter. Um nun exakt zu der Zahl für Zypern im Jahr 2024 zu springen, nutzt das Skript eine mathematische Formel: Position in der Liste = (Länder-Index * Gesamtzahl der Jahre) + Jahres-Index Setzen wir unsere erfundenen Zahlen für Zypern ein: Länder-Index von Zypern = 5 ; Gesamtzahl der Jahre = 5 ; Jahres-Index von 2024 = 4 Die Rechnung lautet: 5 * 5 + 4 = 25 + 4 = 29.

Schritt 4: Den Wert herausholen. JavaScript weiß nun ganz genau: "Ich muss in der riesigen Zahlenliste an die 29. Stelle springen." Dort steht dann der nackte Wert, zum Beispiel 29700. Das Skript nimmt diese Zahl, formatiert sie schön mit Tausendertrennpunkten zu 29.700 und schreibt sie zusammen mit dem Namen "Zypern" in deine HTML-Tabelle.

Zusammenfassung: Das Skript sucht also nicht nach dem Wort "Zypern" in den Daten, sondern es berechnet wie bei einem Schachbrett über Koordinaten (X = Land, Y = Jahr) das genaue Feld, auf dem die Zahl liegt.

Das Bild oben und unten müssen wir jetzt zusammen betrachten. Nach Erfolgreicher Eurostat-Server Kontaktierung sind die Daten im Browser. Wir betrachten erneut das BIP für das Land Zypern. Weiterhin zeigt das Bild oben eine verkürzte Abbildung. Real ist der Datensatz 2000 Zeilen lang. 1️⃣ Art Quittung! Es ist der Datensatz für das Bruttoinlandsprodukt (BIP). Siehe auch Position 4️⃣, ganz oben. 2️⃣ Index für den Ländercode, verkürzte Darstellung. Real 47 Zeilen. Entspricht „Schritt1“ oben und Zeile 44 im Bild unten. 3️⃣ Array für Ländercode und Ländername. Entspricht Zeile 56 im Bild unten. Real 47 Zeilen.4️⃣ und 5️⃣ Index für die Jahre 1975 bis 2025 (wächst). Real 100 Zeilen. Entspricht „Schritt2“ oben und Zeile 34 bis 39 im Bild unten. 6️⃣ Array für das Bruttoinlandsprodukt (BIP). Länge: 1492 Zeilen. Entspricht „Schritt3“ oben und Zeile 47 im Bild unten.

Nach dem Hochlauf der HTML--, CSS-, JavaScript-Applikation kontaktiert die Software sofort den Eurostat-Server (asyn fetch()). Im fehlerfreien Zustand geht es in der Zeile 32 weiter. Die Daten sind in der Variablen „data“ im JSON-Format gespeichert.

Aus den Schubladen der JASON-API, siehe Bild oben, Position 5️⃣, werden in den Zeilen 35 bis 41 Variablen gefüllt. Dabei sind die zwei Variablen „const latestYear“ Wert 2025 und „const latestYearIndex“ Wert 51 die Kernbotschaften. In der Schleife „Iteration über die EU-27 Länder“, Zeile 42, erfolgt beim Durchlauf die Iteration für Zypern, die Selektierung der Wertepaare: „CY ; Zypern“. Das führt zur Konsequenz in der Zeile 44 mit der Befüllung der Variable „countryIndex“ mit dem Wert 18. Folglich kann in Zeile 47 der Index für das Array „Wert Bruttoinlandsprodukt (BIP)“ berechnet werden: 18 * 51 + 50 = 968! Das Array „Wert Bruttoinlandsprodukt (BIP)“ mit einer Länge von 1492 Werten wird indexiert „const gdpValue = data.value[dataIndex] = data.value[968] = "36.483,5" ,siehe Bild oben, Position 6️⃣.

Meine Empfehlung! Webseite laden. Taste F12 betätigen. JavaScript-Quellcode selektieren. Breakpoint auf Zeile 32 setzen. Bei Google Chrome oben links, den Schalter „Seite neu laden“ anklicken. Programm von Zeile 32 bis 62 mit dem Debugger durchsteppen. Noch einen Satz zum Dev-Tool-Debugger! „Was der nicht hat - das brauchst du auch nicht!“

Wenn die „Abfrage-Frequenz“ zum Eurostat Server sehr hoch ist. Wenn die URL (Adresse) fehlerhaft ist. Wenn der Eurostat Server antwortet, jedoch die Response nicht plausibel ist. Dann wird das obige Bild angezeigt!

Arbeitslosigkeit EU (Unemployment EU).

Die Arbeitslosigkeit in der EU wird EU-weit einheitlich nach dem Konzept der Internationalen Arbeitsorganisation (ILO) gemessen. Die Auswertung und Veröffentlichung erfolgt durch das europäische Statistikamt Eurostat. Dadurch sind die Zahlen zwischen den Mitgliedsstaaten direkt vergleichbar.

Das 3-Kriterien-Prinzip der ILO: Um in der europäischen Statistik als erwerbslos (arbeitslos) zu gelten, muss eine Person im Alter zwischen 15 und 74 Jahren folgende Kriterien in einer bestimmten Berichtswoche erfüllen: Keine Arbeit: Die Person ist nicht erwerbstätig (nicht einmal für eine Stunde in der Woche). Arbeitssuche: Sie hat in den letzten vier Wochen aktiv nach einem Job gesucht. Verfügbarkeit: Sie könnte innerhalb von zwei Wochen eine neue Arbeit aufnehmen.

Warum weichen nationale Zahlen ab? Nationale Behörden (wie in Deutschland die Bundesagentur für Arbeit) nutzen oft registrierte Arbeitslose. In der EU-Statistik spielen Meldungen bei der Agentur jedoch keine Rolle. Wer beispielsweise einen Job sucht, aber nicht beim Amt gemeldet ist, taucht in der Eurostat-Quote trotzdem auf. Das führt dazu, dass die Eurostat-Zahlen häufig von den nationalen Statistiken abweichen.

1️⃣ Eurostat-API-URL (Uniform Resource Locator). Eindeutige Adresse für die Anforderung der Arbeitslosenstatistik der 27 EU-Mitgliederstaaten.
2️⃣ Die Abkürzung /une_rt_m steht in der Eurostat-Datenbank für die monatlichen Arbeitslosenquoten. Die Abkürzung im Detail: UNE: Unemployment (Arbeitslosigkeit). RT: Rate (Quote). M: Monthly (Monatlich).
3️⃣ Der Parameter ?format=JSON in einer Webadresse (URL) teilt einem Server mit, dass die angeforderten Informationen im JSON-Format (JavaScript Object Notation) geliefert werden soll.
4️⃣ Die Abkürzung &s_adj=SA steht für Seasonally adjusted (auf Deutsch: saisonbereinigt). Es werden Unterschiede in der Anzahl der Arbeitstage, Wochenenden oder bewegliche Feiertage (z. B. Ostern) in verschiedenen Monaten berücksichtigt.
5️⃣ Die Abkürzung &age=TOTAL steht für Gesamtergebnis aller Altersgruppen. Bei der Datenabfrage wird keine Unterteilung in bestimmte Altersklassen vorgenommen.
6️⃣ Die Abkürzung &unit=PC_ACT steht für Percentage of the active population (Prozentsatz der aktiven Bevölkerung).
7️⃣ Der Parameter &sex=T bewirkt, dass die statistischen Daten für beide Geschlechter zusammen (Männer und Frauen) ausgewertet und angezeigt werden, ohne dass eine geschlechtsspezifische Unterscheidung erfolgt.
8️⃣ Der Parameter &freq=M steht für Update monatlich.

Hinweis zu Position1️⃣: In JavaScript muss die URL in einfache Anführungszeichen ' ' (auch als Single Quotes bezeichnet) eingebettet sein! Weiterhin kannst du den obigen String, ohne Anführungszeichen, in die Adress- Befehlszeile des Browsers eingeben. Dann erhältst du die kompletten Eurostat-JSON-Daten. Weiterhin wird im Anzeigefeld des Browsers ein Schalter eingeblendet, durch Anklicken werden die API-Daten formatiert, dass erhöht die Lesbarkeit der Daten. Zumindest ist das bei meinem Lieblingsbrowser, Google Chrome, so! Es ist schon sehr hilfreich, besonders für die nachfolgenden Informationen, sich einen Überblick zu verschaffen, was da auf dich zukommt.

Wie selektiert man die Arbeitslosenquote aus einer API-Liste mit 16300 Zeilen? Vorher wurde die Liste vom Eurostat-Server in den Webbrowser mit JavaScript eingelesen.

Die Ausgangslage: Das bekannte "Schachbrett"! Erinnerst du dich an das BIP? Eurostat liefert uns auch hier wieder getrennte Schubladen: Eine Schublade mit allen Ländern (z. B. DE, AT, CY). Eine Schublade mit allen Monaten (z. B. 2026M01, 2026M02, 2026M03, 2026M04). Eine riesige, flache Liste mit allen Zahlen hintereinander weg. Das Prinzip bleibt gleich: Um die Zahl für ein Land in einem bestimmten Monat zu finden, rechnen wir wieder: Position = (Länder-Index * Gesamtzahl der Monate) + Monats-Index

Das neue Problem: Die "Geister-Monate"! Warum war das jetzt bei der Arbeitslosigkeit so knifflig? Eurostat ist extrem schnell im Erstellen von neuen Monats-Schubladen. Wenn wir uns im Juni befinden, hat Eurostat in seiner Datenbank schon die Schubladen für 2026M05 (Mai) oder sogar 2026M06 (Juni) angelegt. Aber: Die statistischen Ämter der einzelnen Länder sind unterschiedlich schnell im Melden. Deutschland hat seine Daten für April vielleicht schon gemeldet. Spanien aber noch nicht. Und für den Mai hat noch überhaupt kein Land Daten geliefert. Wenn unser Programm nun stur den allerletzten Monat aus der Liste greift (z. B. Juni), landen wir in einer Schublade, die zwar existiert, in der aber für fast alle Länder noch gähnende Leere herrscht. Das Ergebnis: Die Tabelle sagt überall „Keine Daten“.

Der Detektiv-Trick: Die Rückwärts-Suche im JavaScript. Hier kommt der neue Teil der fetch()-Funktion ins Spiel. Das Skript verhält sich jetzt wie ein Detektiv, der den Kalender rückwärts durchblättert, um den ersten "echten" Datenmonat zu finden.

1️⃣ Der Blick auf den neuesten Monat: Das Skript schaut sich den allerneuesten Monat an (sagen wir 2026M06). Es springt in der riesigen Zahlenliste an die Position von Deutschland (DE) für diesen Monat. Es sieht: Nichts da (undefined). Das Skript sagt: "Dieser Monat ist unbrauchbar."

2️⃣ Einen Schritt zurück: Das Skript blättert einen Monat zurück auf 2026M05. Es prüft wieder die Position von Deutschland. Wieder sieht es: Nichts da. Das Skript sagt: "Immer noch zu früh."

3️⃣ Der Treffer: Das Skript blättert noch einen Monat weiter zurück auf 2026M04. Es prüft die Position von Deutschland und sieht: Ah, da steht eine Zahl! Z. B. 3,2 %. In dem Moment, in dem das Skript diese erste echte Zahl entdeckt, ruft es: "Stopp! Ich habe den aktuellsten, prall gefüllten Monat gefunden!" Es merkt sich diesen Monat (2026M04) und bricht die Suche ab.

Das Finale: Die Tabelle befüllen! Jetzt, wo der perfekte Monat (April) feststeht, läuft alles wieder automatisch wie beim BIP: Das Skript nimmt den Index vom April (z. B. Position 50 in der Monatsliste). Es läuft nun nacheinander alle 27 Länder durch. Für jedes Land (z. B. Österreich) rechnet es aus: (Index von Österreich * Gesamtzahl aller Monate) + 50. Es springt an die berechnete Stelle in der riesigen Zahlenliste, schnappt sich die Prozentzahl und schreibt sie sauber formatiert als 04/2026 in deine HTML-Tabelle.

Zusammenfassung! Der Unterschied zum BIP ist also einfach: Beim BIP haben wir blind das letzte Jahr genommen, weil Jahresdaten nicht so schnell "leer" hinterherhinken. Bei den monatlichen Arbeitslosenquoten schaut das Skript erst kurz nach, ab welchem Monat rückwärts gezählt überhaupt erst echte Zahlen eingetragen sind, und nimmt diesen als Basis für alle 27 Länder.

Das Bild oben und unten müssen wir jetzt zusammen betrachten. Nach Erfolgreicher Eurostat-Server Kontaktierung sind die Daten im Browser. Wir betrachten die Arbeitslosenquote für das Land Österreich. Weiterhin zeigt das Bild oben eine verkürzte Abbildung. Real ist der Datensatz 16240 Zeilen lang, davon sind es, allein, schon 14760 Zeilen für die Arbeitslosenquote.
1️⃣ EU-Land mit der dazugehörigen Kurzbezeichnung („AT“: „Austria“) wird als Liste in einer Variablen „geoIndex“ geladen (in das Array eingereiht). Das passiert in der Zeile 37 im unteren Bild.
2️⃣ Die erste „Schublade“ zur Bestimmung der Arbeitslosenquote. Der Index für das Land Österreich, hier Ziffer 21. Das passiert in der Zeile 66 im unteren Bild.
3️⃣ Die zweite „Schublade“! Der zeitabhängige Index für das Land Österreich. Achtung! Hat noch nichts mit der Prüfung „sind da Daten drin“ zu tun. Siehe Zeile 50 bis 55, im unteren Bild.
4️⃣ Die dritte „Schublade“! Endlich! Die Arbeitslosenquote für das Land Österreich wurde gefunden. An Position 11460 der Liste. Das passiert in der Zeile 67 im unteren Bild.

Staatsverschuldung der 27 EU Länder.

Konsolidierter Bruttoschuldenstand des Staates.

Die Staatsverschuldung der 27 EU-Länder ist ein wichtiges Indikator für die finanzielle Stabilität und die Haushaltslage der Mitgliedstaaten. Die aktuellen Daten zeigen, dass die EU-27 eine anhäufte Schuldenquote von 82,1 % des BIP aufweist (2025). Diese Zahlen sind ein Hinweis auf die finanziellen Herausforderungen und die Notwendigkeit von Reformen, um die Stabilität und Finanzierung der EU zu sichern.

1️⃣ Eurostat-API-URL (Uniform Resource Locator). Eindeutige Adresse für die Anforderung der Staatsverschuldung der 27 EU-Mitgliederstaaten.
2️⃣ Unter dem Eurostat-Code /gov_10dd_edpt1 verbirgt sich die zentrale Datenbank für staatliche Defizite, Schuldenstände sowie ergänzende Finanzdaten der EU-Mitgliedstaaten und der Eurozone.
3️⃣ Bei Eurostat steht der Parameter &na_item für National accounts indicator (Indikator der Volkswirtschaftlichen Gesamtrechnungen, VGR). Der Wert GD ist die offizielle Abkürzung für Government consolidated gross debt (Konsolidierter Bruttoschuldenstand des Staates).
4️⃣ Bei Eurostat steht &Sector=S13 für den Sektor Staat (General Government). Er umfasst alle staatlichen institutionellen Einheiten, die kollektive und individuelle Bedürfnisse finanzieren und bereitstellen (z.B. Ministerien, Kommunen, Sozialversicherungen).
5️⃣ Der Eurostat-Code &unit=PC GDPL steht für "Percentage of Gross Domestic Product" (Anteil am Bruttoinlandsprodukt).
6️⃣ &freq=A. Die Abkürzung steht für Frequency (Häufigkeit), und der Wert A steht in der Regel für Annual (jährlich).

Hinweis:
Das Laden der Eurostat Staatsverschuldung API und die Filterung der Quote für die 27 EU-Staaten, in Abhängigkeit der Jahre, sind mit dem obigen BIP-Beispiel identisch. Ich möchte das hier nicht nochmal visualisiere.

Was habe ich bei diesem Projekt neu gelernt?

CSS, HTML, JavaScript: Hinweis, wenn API-Daten geladen werden -> "spinner".

Werden große Datenmengen in den Webbrowser geladen. Weiterhin läuft dieser Vorgang im Asynchronen Modus (Hintergrund). Dann hat das für den Anwender Konsequenz. Er muss warten. Früher habe ich einen Hinweistext eingeblendet. Jetzt soll das CSS übernehmen. Im Fachchinesisch sagt man "spinner" dazu. Hier eine kurze Erklärung:

2️⃣ CSS, .spinner @keyframes spin. Diese beiden CSS-Bausteine arbeiten Hand in Hand wie ein Uhrwerk und sein Motor, um das Lade-Symbol auf deiner Webseite zum Drehen zu bringen.

.spinner - das Uhrwerk (das Aussehen). Die Klasse .spinner baut das optische Rad, das du auf dem Bildschirm siehst. Stell dir vor, du bastelst einen kleinen Kreis aus Papier: width und height: Bestimmen, wie groß das Rad ist (50 mal 50 Pixel). border: 5px solid #f3f3f3;: Das malt einen dünnen, hellgrauen Kreis (den Rahmen). border-top: 5px solid var(--primary-color);: Das färbt nur die Oberseite des Kreises in deiner Hauptfarbe (EU-Blau). Dadurch hat der Kreis einen farbigen Akzent, an dem das Auge die Drehung überhaupt erst erkennen kann. Wäre der Kreis komplett einfarbig, würde man die Drehung gar nicht sehen! border-radius: 50%;: Das biegt die Ecken des Quadrats so stark ab, dass ein perfekter, runder Kreis entsteht. Der wichtigste Befehl hier ist aber animation: spin 1s linear infinite;. Das ist der Einschaltknopf. Er sagt dem Browser: "Bitte spiele die Animation mit dem Namen spin ab. Sie soll genau 1 Sekunde dauern, sich linear (also absolut gleichmäßig, ohne zu ruckeln) bewegen und infinite (unendlich) oft wiederholt werden."

@keyframes spin Der Motor (Die Bewegung). Während .spinner sagt, wie das Rad aussieht und wie lange es sich drehen soll, bestimmt @keyframes spin, was bei dieser Drehung genau passiert. keyframes bedeutet übersetzt "Schlüsselbilder", wie bei einem Zeichentrickfilm. Hier definieren wir den Start- und den Endpunkt der Bewegung: 0% {transform: rotate(0deg);}: Am Startpunkt (bei 0 Prozent der Zeit) steht der Kreis ganz normal still bei 0 Grad. 100% {transform: rotate(360deg);}: Am Endpunkt (bei 100 Prozent der Zeit, also nach genau einer Sekunde) hat sich der Kreis einmal komplett um die eigene Achse gedreht, bis zu 360 Grad.

Das Zusammenspiel. Da im .spinner das Wort infinite (unendlich) steht, passiert Folgendes: Der Browser dreht den Kreis in einer Sekunde von 0 auf 360 Grad. Sobald er bei 100 % (360 Grad) angekommen ist, springt er sofort wieder blitzschnell zu 0 % zurück und fängt von vorne an. Weil das so schnell und gleichmäßig passiert, sieht es für unser Auge wie eine einzige, flüssige, unendliche Drehbewegung aus, der perfekte Lade-Spinner!

1️⃣ HTML muss auch Bescheid wissen. Zeile 54.
3️⃣ Die Funktion async function fetchGDPData() fordert ja die Daten an. Folglich ist das auch der Zeitpunkt den spinner zu aktivieren. In Zeile 28 bekommt er von HTML die Identifikation (getElementById('loading')). Der spinner soll wieder versteckt werden (hidden), wenn die Tabelle gefüllt ist, oder ein Fehler ist aufgetreten, Zeile 78 und 83.

Der vierte und letzte Teil des Projektes! Das Zusammenführen aller drei APIs in eine einzige Applikation mit einer Länder-Auswertung.

EU 27 Monitor

Weiter oben in dieser Beschreibung habe ich den „spinner“ vorgestellt. Hier ist er sehr wichtig, weil alle drei Eurostat-APIs in einem Rutsch geladen werden. Wir wollen ja nicht „im Dunkeln tappen“. Das Laden der APIs (BIP, Staatsverschuldung und Arbeitslosigkeit) übernimmt JavaScript (fetch()). Jedoch darf die Auswertung der Daten erst erfolgen, wenn alle drei Kandidaten eine Rückmeldung gegeben haben. JavaScript präsentiert hierfür eine mächtige Funktion: Promise.all().

Die Bedienung des Programmes ist schnell erklärt: Du kannst oben in die Suchleiste tippen (z. B. "Ö" oder "FR"). Es öffnet sich sofort eine schicke Autocomplete-Vorschlagsliste. Klickst du auf ein Land, updaten sich alle drei Karten blitzschnell im selben Augenblick, ohne dass die Seite neu laden muss.

Blumen! Liebe Leserinnen und Leser! "Ich muss so etwas immer mal wieder sehen"!

Zurück