FlowingDev

JSON, erklärt: Das Datenformat, das heimlich das Web am Laufen hält

Erfahre, was JSON (JavaScript Object Notation) ist, warum es das dominierende Datenaustauschformat ist und wie seine einfache, textbasierte Struktur funktioniert.

Tool ausprobieren: JSON Editor

In einem Satz

JSON ist ein leichtgewichtiges, textbasiertes Format zum Strukturieren und Austauschen von Daten, das für Menschen einfach zu lesen und für Maschinen einfach zu parsen ist.

Welches Problem es löst

In den alten Tagen des Webs (den späten 90ern und frühen 2000ern), wenn deine Website neue Daten ohne ein komplettes Neuladen der Seite abrufen sollte, hast du wahrscheinlich eine Technologie namens AJAX (Asynchronous JavaScript and XML) verwendet. Und wie der Name schon andeutet, war das Datenformat der Wahl XML.

XML ist mächtig, aber es ist auch... gesprächig. Klobig. Es ist voller öffnender Tags, schließender Tags, Attribute und Namespaces. Es in JavaScript, der Sprache des Browsers, zu parsen, war eine Qual. Man musste durch einen schwerfälligen Dokumentenbaum navigieren, und es fühlte sich einfach nicht nativ an.

<!-- Das ist nur ein User. Stell dir eine Liste mit Tausenden vor. Autsch. -->
<user id="123">
  <username>coder_dave</username>
  <isActive>true</isActive>
  <roles>
    <role>admin</role>
    <role>editor</role>
  </roles>
</user>

Um 2001 herum arbeitete ein Entwickler namens Douglas Crockford an einem Projekt und brauchte eine einfachere Möglichkeit, Daten an den Browser zu übergeben. Er hatte eine brillante Erkenntnis: JavaScript hatte bereits eine absolut taugliche Methode, um Datenstrukturen darzustellen – seine eigene Objekt-Literal-Syntax. Was wäre, wenn man Daten einfach als String senden könnte, der aussieht wie ein JavaScript-Objekt?

Das war die Geburtsstunde von JSON (JavaScript Object Notation). Ein Server konnte diesen Text senden:

{
  "id": 123,
  "username": "coder_dave",
  "isActive": true,
  "roles": ["admin", "editor"]
}

...und der Browser konnte ihn mit minimalem Aufwand in ein natives JavaScript-Objekt umwandeln, mit dem er sofort arbeiten konnte. Es war schlank, sauber und perfekt auf die Muttersprache des Webs zugeschnitten. Diese Einfachheit löste eine kambrische Explosion von Web-APIs aus und trieb den Aufstieg von dynamischen Single-Page-Anwendungen, mobilen Backends und im Grunde das gesamte moderne Internet, wie wir es kennen, an. JSON löste nicht nur ein technisches Problem; es ölte die Räder für eine ganz neue Generation von Software.

Wie es unter der Haube funktioniert

Im Kern ist JSON nur ein Regelwerk, um Daten als Text aufzuschreiben. Die Regeln sind einfach, und genau deshalb ist es so erfolgreich.

Die Bausteine: Keys und Values

Das gesamte JSON-Universum baut auf einer simplen Struktur auf: dem Schlüssel-Wert-Paar (Key-Value-Pair).

"key": value

  • Der Key (Schlüssel) ist immer ein String, der in doppelte Anführungszeichen eingeschlossen ist. Das ist nicht verhandelbar.
  • Der Value (Wert) kann einer von wenigen spezifischen Datentypen sein.

Dieses Paar beschreibt eine einzelne Information, wie "name": "Luke Skywalker" oder "age": 19.

Die Datentypen

JSON ist bei seinen Werttypen streng. Du kannst nicht einfach irgendwas reinwerfen. Du bekommst sechs Grundtypen plus null.

Typ Beispiel Beschreibung
String "Die Macht ist stark in diesem hier." Beliebiger Text. Muss in doppelten Anführungszeichen stehen.
Number 1138 oder 3.14 Ganzzahlen oder Fließkommazahlen. Kein Unterschied.
Boolean true oder false Immer kleingeschrieben. Repräsentiert einen binären Zustand.
Array ["Tatooine", "Dagobah", "Bespin"] Eine geordnete Liste von Werten, eingeschlossen in [].
Object { "weapon": "lightsaber", "color": "green" } Eine ungeordnete Sammlung von Schlüssel-Wert-Paaren, eingeschlossen in {}.
Null null Repräsentiert das beabsichtigte Fehlen eines Wertes.

Das war's. Beachte, was fehlt: Funktionen, Datumsangaben (sie werden als Strings gesendet), undefined und, ganz berühmt, Kommentare. Dieser Minimalismus ist ein Feature, kein Bug; er hält das Format eindeutig und für jede Programmiersprache leicht zu parsen.

Daten strukturieren: Objekte und Arrays

Die wahre Stärke liegt in der Verschachtelung dieser Typen. Der value in einem Schlüssel-Wert-Paar kann ein weiteres Objekt oder ein Array sein. So kannst du beliebig komplexe Datenstrukturen aufbauen.

Objekte ({...}) werden verwendet, um zusammengehörige Daten über ein einzelnes "Ding" zu gruppieren. Stell es dir wie einen Wörterbucheintrag oder ein Profil vor.

Arrays ([...]) werden für geordnete Listen von Elementen verwendet. Die Elemente in einem Array können von jedem Typ sein, sogar gemischt (obwohl es meist eine gute Praxis ist, sie einheitlich zu halten).

Schauen wir uns ein vollständigeres Beispiel an:

{
  "squadName": "Star Wars Heroes",
  "formed": 1977,
  "active": true,
  "members": [
    {
      "name": "Luke Skywalker",
      "age": 19,
      "secretIdentity": null,
      "powers": [
        "Jedi-Gedankentricks",
        "Pilotenfähigkeiten",
        "Die Macht"
      ]
    },
    {
      "name": "Han Solo",
      "age": 29,
      "secretIdentity": null,
      "powers": [
        "Blaster-Treffsicherheit",
        "Sarkasmus",
        "Kessel-Flug in unter 12 Parsecs"
      ]
    }
  ]
}

Siehst du? Wir haben ein äußeres Objekt, das die Truppe beschreibt. Eine seiner Eigenschaften, "members", ist ein Array. Jedes Element dieses Arrays ist ein weiteres Objekt, das einen einzelnen Helden darstellt. Und jedes Heldenobjekt hat seine eigenen Eigenschaften, von denen eine ("powers") ein weiteres Array von Strings ist. So baut man mit JSON einen Datenbaum auf.

Vom Text zum Objekt: Das Parsen

Der Zaubertrick besteht darin, diesen Text in etwas zu verwandeln, das ein Programm verwenden kann.

  1. Serialisierung: Eine serverseitige Anwendung (geschrieben in Python, Java, Go, etc.) hat Daten im Speicher. Sie verwendet eine JSON-Bibliothek, um diese Daten in einen JSON-formatierten String zu serialisieren. In JavaScript ist das JSON.stringify().
  2. Übertragung: Dieser String wird über das Netzwerk gesendet, typischerweise als Body einer HTTP-Antwort.
  3. Parsen: Der Client (wie ein Webbrowser) empfängt diesen String. Er verwendet einen eingebauten JSON-Parser, um den String wieder in eine native Datenstruktur umzuwandeln, die er manipulieren kann. In JavaScript ist das JSON.parse().

Dieser zweistufige Prozess von Serialisieren und Parsen ist der Herzschlag der modernen Web-Kommunikation.

Geschichten aus der Praxis

Die verbuggte Mobile-App

Ein Startup brachte eine mobile Bestell-App für eine lokale Restaurantkette auf den Markt. Eines Morgens stürzte die App bei jedem einzelnen Benutzer beim Öffnen ab. Das Entwicklerteam war im totalen Panikmodus. Die Server-Logs zeigten, dass die API einen 200 OK-Status sendete, und die Daten sahen auf den ersten Blick gut aus. Nach Stunden hektischen Debuggens inspizierten sie schließlich den rohen Text der API-Antwort. Ein Backend-Entwickler hatte, um hilfsbereit zu sein, eine Notiz für seine Kollegen direkt in den Code geschrieben, der das JSON generierte: // TODO: Wochenend-Öffnungszeiten bestätigen. Dieser Kommentar wurde in den finalen JSON-String mit aufgenommen. Während er im Code harmlos ist, macht ein Kommentar JSON ungültig. Der strikte JSON-Parser der App sah das unerwartete // und versagte sofort, was die App zum Absturz brachte, bevor sie überhaupt eine Fehlermeldung anzeigen konnte.

Lektion: JSON-Parser sind nicht nachsichtig. Das Format ist aus gutem Grund streng definiert: um die Interoperabilität zu garantieren. Ein einziges ungültiges Zeichen – ein Kommentar, ein nachgestelltes Komma, ein einfaches Anführungszeichen – führt dazu, dass ein valider Parser die gesamte Nutzlast zurückweist.

Das internationale Preis-Fiasko

Ein amerikanisches E-Commerce-Unternehmen expandierte nach Deutschland. Ihre API sendete Produktinformationen als JSON, einschließlich eines price-Feldes. Für einen Artikel für 19,95 $ lautete das JSON "price": 19.95. In Vorbereitung auf den deutschen Launch aktualisierte ein Entwickler das Backend, um den Preis gemäß den deutschen Konventionen zu formatieren, bei denen das Komma als Dezimaltrennzeichen dient. Die API begann, "price": "19,95" zu senden. Der Frontend-Code erwartete jedoch immer noch eine Zahl. In JavaScript wertet parseFloat("19,95") nur zu 19 aus und lässt alles nach dem Komma fallen. Plötzlich wurden alle Produkte in Deutschland mit einem massiven, falschen Rabatt angezeigt.

Lektion: JSON ist für Rohdaten da, nicht für die Präsentation. Der Datentyp ist wichtig. Ein Preis ist eine Zahl, also sende ihn als Zahl (19.95). Lass die clientseitige Anwendung (den Browser oder die mobile App) die Aufgabe übernehmen, diese Zahl basierend auf der Locale des Benutzers in $19.95, 19,95 € oder ¥19 zu formatieren. Vermische nicht Daten- und Darstellungslogik.

Die Config-Datei, die niemand erklären konnte

Ein kleines Team richtete einen neuen Dienst ein und verwendete eine config.json-Datei, um Datenbank-Verbindungsstrings, API-Keys und Feature-Flags zu speichern. Als die Konfiguration komplexer wurde, brauchten sie dringend eine Möglichkeit, Kommentare hinzuzufügen, um zu erklären, was jede kryptische Einstellung tat und warum sie auf einen bestimmten Wert gesetzt war. Aber JSON verbietet Kommentare. Ihre "Lösung" war, eine config_documentation.md-Datei zu erstellen, die mit config.json synchron gehalten werden musste. Das wurde schnell zu einer riesigen Qual. Schließlich erkannten sie ihren Fehler.

Lektion: Verwende das richtige Werkzeug für die jeweilige Aufgabe. JSON ist der unangefochtene Champion für den Datenaustausch zwischen Maschinen (wie eine API-Antwort). Aber für von Menschen gepflegte Konfigurationsdateien, bei denen Kommentare und Lesbarkeit entscheidend sind, sind andere Formate wie YAML oder sogar eine einfache .js-Datei oft die weitaus bessere Wahl.

Häufige Fehler und Fallstricke

  • Nachgestellte Kommas: Das Hinzufügen eines Kommas nach dem letzten Element in einem Objekt oder Array ("key": "value",}) macht dein JSON ungültig. Dies ist ein häufiger Fehler für Entwickler, die an fehlerverzeihendere Syntaxen in JavaScript gewöhnt sind.
  • Kommentare: Du kannst keine haben. // und /* ... */ sind nicht Teil der Spezifikation und zerstören das Parsing. Wenn du Metadaten hinzufügen musst, musst du dies innerhalb der Datenstruktur selbst tun, z.B. { "_comment": "Das ist meine Notiz", "realData": "..." }.
  • Einfache Anführungszeichen: Alle Keys und alle String-Werte müssen doppelte Anführungszeichen (") verwenden. Die Verwendung von einfachen Anführungszeichen (') ist ungültiges JSON, auch wenn es in JavaScript üblich ist.
  • Undefinierte Keys: Das Senden von {"key": undefined} ist nicht möglich. Das Schlüssel-Wert-Paar wird typischerweise bei der Serialisierung weggelassen. Um einen fehlenden Wert darzustellen, verwende null.
  • Zahlen als Strings verwenden: Obwohl du eine Zahl als String senden kannst (z.B. "id": "123"), ist das schlechte Praxis. Es zwingt die empfangende Anwendung zu zusätzlicher Arbeit, um sie wieder in eine Zahl umzuwandeln, und kann zu subtilen Fehlern führen (z.B. ist "10" > "9" beim String-Vergleich false).

Warum es auf deinem Radar sein sollte

Wenn du auch nur im Entferntesten mit Code zu tun hast, wirst du auf JSON stoßen. Die Frage ist nicht ob, sondern wann und wie oft.

  • Web-Entwickler: Du wirst JSON von APIs konsumieren und von deinen Formularen aus senden. Dein gesamter Anwendungszustand wird wahrscheinlich als JSON-ähnliches Objekt verwaltet.
  • Backend-Entwickler: Du wirst APIs erstellen, die JSON produzieren, und JSON von anderen Diensten konsumieren.
  • Mobile-Entwickler: Du wirst ausschließlich über APIs, die JSON sprechen, mit deinem Backend kommunizieren.
  • DevOps/SREs: Infrastructure-as-Code-Tools, CI/CD-Pipelines und Cloud-Provider-APIs werden alle mit JSON oder ähnlichen Formaten konfiguriert und verwaltet.
  • Data Scientists: Du wirst Daten von Web-APIs ziehen, und sie werden fast immer als JSON ankommen.
  • Neugierige Nicht-Entwickler: Das Verständnis der einfachen Schlüssel-Wert-Struktur von JSON kann entmystifizieren, wie Apps auf deinem Handy ihre Daten erhalten und wie Websites Inhalte dynamisch laden. Es ist ein Blick unter die Haube der digitalen Welt.

JSON ist die Lingua Franca für Daten im Internet. Seine Regeln und seinen Zweck zu kennen, ist eine grundlegende Fähigkeit für jeden, der moderne Software baut oder damit arbeitet.

Tiefer eintauchen

  • JSON.org: Die originale, einseitige Spezifikation von Douglas Crockford. Eine Meisterklasse in Sachen Einfachheit.
  • RFC 8259: Der offizielle IETF-"Standard", der das JSON-Format für das Internet formalisiert.
  • MDN: Arbeiten mit JSON: Der maßgebliche Leitfaden für JavaScript-Entwickler, der JSON.parse() und JSON.stringify() erklärt.
  • Wikipedia: JSON: Bietet einen großartigen Überblick über die Geschichte, Ableitungen (wie GeoJSON) und Vergleiche mit anderen Formaten.

Theorie erledigt. Zeit, loszulegen — 100 % in deinem Browser.

Tool ausprobieren: JSON Editor