Zum Inhalt springen

JSON

Das JSON-Format verstehen: Ein Leitfaden für Entwickler

5 min read

Das JSON-Format verstehen: Ein Leitfaden für Entwickler

Wenn Sie mehr als nur ein paar Tage damit verbracht haben, sich über Webentwicklung, Programmierung oder APIs zu informieren, sind Sie zweifellos auf JSON gestoßen. Es ist das absolute Rückgrat der modernen Internetkommunikation. Wann immer eine mobile App das Wetter abruft, ein Browser Ihren Social-Media-Feed lädt oder ein Smart-Home-Gerät die Temperatur meldet, werden diese Daten mit ziemlicher Sicherheit im JSON-Format übertragen.

Aber was genau ist JSON? Warum wurde es so unglaublich beliebt? Und am wichtigsten: Wie lesen, schreiben und manipulieren Sie es, ohne Ihre Anwendungen zu beschädigen?

In diesem umfassenden Leitfaden werden wir die Ursprünge von JSON untersuchen, seine genauen Syntaxregeln aufschlüsseln, seine unterstützten Datentypen betrachten und erklären, warum es ältere Formate wie XML vollständig ersetzt hat.

Was ist JSON?

JSON steht für JavaScript Object Notation.

Im Kern ist JSON ein leichtgewichtiges, textbasiertes Datenaustauschformat. Es ist so konzipiert, dass es für Menschen einfach zu lesen und zu schreiben und für Maschinen einfach zu parsen und zu generieren ist.

Obwohl sein Name "JavaScript" enthält, ist JSON vollständig sprachunabhängig. Es wurde ursprünglich von JavaScript abgeleitet, aber heute verfügt jede wichtige Programmiersprache (Python, Java, C#, Go, Ruby, PHP) über integrierten Code (oder Bibliotheken), um JSON-Daten zu parsen und zu generieren.

Der Hauptzweck von JSON ist die Übertragung von Daten zwischen einem Server und einer Webanwendung (z. B. das Senden von Benutzerprofildaten aus einer Backend-Datenbank an eine Frontend-React-Anwendung).

Die Syntaxregeln von JSON

JSON ist bekanntermaßen streng (strict). Ein einziges fehlendes Komma oder ein falsch platziertes Anführungszeichen führt zu einem Parsing-Fehler (der gefürchtete SyntaxError: Unexpected token). Das Verständnis der Regeln ist entscheidend.

Eine JSON-Datei baut im Wesentlichen auf zwei Strukturen auf:

  1. Objekte (Objects): Eine Sammlung von Schlüssel-Wert-Paaren (Key-Value-Pairs), die in geschweifte Klammern {} eingeschlossen sind.
  2. Arrays: Eine geordnete Liste von Werten, die in eckige Klammern [] eingeschlossen sind.

Hier ist ein Beispiel für ein vollständiges, gültiges JSON-Dokument, das ein Benutzerprofil darstellt:

{
  "id": 1045,
  "username": "tech_guru_99",
  "isActive": true,
  "email": null,
  "roles": ["admin", "editor"],
  "profile": {
    "firstName": "Alice",
    "lastName": "Smith",
    "age": 28
  }
}

Lassen Sie uns die goldenen Regeln für das Schreiben von gültigem JSON aufschlüsseln:

1. Daten liegen in Name/Wert-Paaren vor

Ein Name/Wert-Paar (auch Schlüssel-Wert-Paar genannt) besteht aus einem Feldnamen (in doppelten Anführungszeichen), gefolgt von einem Doppelpunkt, gefolgt von einem Wert. "username": "tech_guru_99"

2. Schlüssel MÜSSEN in doppelten Anführungszeichen stehen

In JavaScript können Sie einen Objektschlüssel ohne Anführungszeichen schreiben (z. B. username: "tech_guru_99"). In JSON ist dies illegal. Jeder einzelne Schlüssel muss in doppelte Anführungszeichen "" gesetzt werden. Einfache Anführungszeichen '' sind ebenfalls streng verboten.

3. Daten werden durch Kommas getrennt

Jedes Paar in einem Objekt und jeder Wert in einem Array muss durch ein Komma getrennt werden. Abschließende Kommas (Trailing Commas) sind jedoch nicht zulässig. Sie können nach dem letzten Element in einer Liste oder einem Objekt kein Komma setzen.

Ungültiges JSON (Abschließendes Komma):

{
  "name": "Alice",
  "age": 28,
}

4. Keine Kommentare erlaubt

Im Gegensatz zu YAML oder Standard-Codedateien unterstützt JSON keine Kommentare (// oder /* */). Wenn Sie versuchen, einer Standard-JSON-Datei einen Kommentar hinzuzufügen, schlägt der Parser fehl. JSON ist streng für Daten gedacht, nicht für Metadaten oder Anmerkungen.

Unterstützte Datentypen

JSON unterstützt nur sechs grundlegende Datentypen. Sie können keine Funktion, kein Date-Objekt oder keinen undefinierten (undefined) Wert direkt in JSON einfügen.

  1. String: In doppelte Anführungszeichen eingeschlossener Text.
    • "city": "Berlin"
  2. Number (Zahl): Eine Ganzzahl oder eine Fließkommazahl (keine Anführungszeichen).
    • "age": 30, "pi": 3.14159
  3. Boolean: true oder false (keine Anführungszeichen, komplett kleingeschrieben).
    • "isSubscribed": true
  4. Array: Eine geordnete Liste von Werten, eingeschlossen in eckige Klammern.
    • "colors": ["red", "green", "blue"]
  5. Object (Objekt): Eine verschachtelte Schlüssel-Wert-Zuordnung, eingeschlossen in geschweifte Klammern.
    • "address": { "street": "Hauptstr" }
  6. Null: Repräsentiert einen leeren oder fehlenden Wert (kleingeschrieben).
    • "middleName": null

Hinweis zu Datumsangaben: Da JSON keinen nativen Date-Typ (Datum) hat, werden Daten (Dates) normalerweise in standardmäßige ISO 8601-Strings (z. B. "2026-09-19T14:30:00Z") oder numerische Unix-Zeitstempel konvertiert, bevor sie in JSON gespeichert werden.

JSON vs. XML: Der Wendepunkt des Web

Um JSON wirklich schätzen zu können, muss man sich ansehen, was davor kam: XML (eXtensible Markup Language).

In den frühen 2000er Jahren war XML der Standard für die Datenübertragung. Sehen wir uns an, wie unser früheres Benutzerprofil in XML geschrieben würde:

<user>
  <id>1045</id>
  <username>tech_guru_99</username>
  <isActive>true</isActive>
  <email></email>
  <roles>
    <role>admin</role>
    <role>editor</role>
  </roles>
  <profile>
    <firstName>Alice</firstName>
    <lastName>Smith</lastName>
    <age>28</age>
  </profile>
</user>

Warum JSON gewonnen hat

  1. Weniger ausführlich (Less Verbose): XML erfordert öffnende und schließende Tags für jedes einzelne Datenelement (<username>...</username>). Dadurch wird die Dateigröße deutlich größer, was bedeutet, dass die Übertragung über ein Netzwerk länger dauert. JSON entfernt dieses visuelle Rauschen.
  2. Schnelleres Parsen: Browser müssen XML als Document Object Model (DOM) durchlaufen, was rechenintensiv ist. JSON kann von der JavaScript-Engine mithilfe von JSON.parse() in einem Bruchteil einer Millisekunde nativ geparst werden.
  3. Arrays: XML hat kein natives Konzept von Arrays. Sie wiederholen einfach Tags (wie die <role>-Tags oben). Die []-Syntax von JSON lässt sich in fast jeder Programmiersprache perfekt auf Arrays abbilden.

Arbeiten mit JSON in JavaScript

Da JSON von JavaScript abgeleitet ist, ist die Arbeit damit in JS dank des integrierten JSON-Objekts unglaublich einfach. Dieses Objekt bietet zwei primäre Methoden.

1. JSON.parse()

Diese Methode nimmt einen rohen JSON-String (normalerweise von einer API empfangen) und wandelt ihn in ein verwendbares JavaScript-Objekt um.

const jsonString = '{"name": "Alice", "age": 28}';
const userObject = JSON.parse(jsonString);

console.log(userObject.name); // Ausgabe: Alice

2. JSON.stringify()

Diese Methode macht genau das Gegenteil. Sie nimmt ein JavaScript-Objekt und wandelt es in einen JSON-String um, damit er über das Netzwerk gesendet oder in einer Datei gespeichert werden kann.

const myObj = {
  name: "Bob",
  skills: ["HTML", "CSS", "JS"]
};

const outgoingJSON = JSON.stringify(myObj);
// Ausgabe: '{"name":"Bob","skills":["HTML","CSS","JS"]}'

Fazit

JSON ist ein Triumph der Einfachheit. Durch die Etablierung eines minimalen, strengen Regelwerks wurde der gesamten Softwareindustrie eine universelle Sprache für Daten zur Verfügung gestellt.

Egal, ob Sie ein Node.js-Projekt konfigurieren (über package.json), Daten von einer Drittanbieter-API abrufen oder eine komplexe Microservices-Architektur aufbauen, JSON ist der Klebstoff, der alles zusammenhält. Wenn Sie die Syntaxregeln beherrschen, die unterstützten Datentypen verstehen und wissen, wie man es in der Sprache Ihrer Wahl parst und in einen String umwandelt, legen Sie den Grundstein für fast die gesamte moderne Web- und Backend-Entwicklung.

Buy me a coffee