Was ist JSON? Das Datenformat einfach erklärt

Jede API spricht JSON. Jede Config-Datei ist JSON. Wenn du dich mit App-Entwicklung, Webentwicklung oder irgendetwas beschäftigst, das mit Daten zu tun hat, triffst du auf JSON. Und das Beste daran: Es ist wirklich nicht schwer zu verstehen. Fünf Minuten, und du kannst JSON lesen und schreiben.

Ich arbeite jeden Tag mit JSON -- in API-Responses, in Konfigurationsdateien, in Datenbanken. Es ist die Lingua franca der modernen Softwareentwicklung.

Kurz zusammengefasst

• JSON steht für JavaScript Object Notation -- ein textbasiertes, lesbares Datenformat
• JSON kennt Objekte {}, Arrays [], Strings, Zahlen, Booleans und null
• Es ist der Standard für API-Kommunikation und Konfigurationsdateien
• JSON ist sprachunabhängig und wird von jeder Programmiersprache unterstützt
• Häufige Fehler: Trailing Commas, einfache Anführungszeichen, Kommentare (alles nicht erlaubt)

Das Versand-Etikett der Softwarewelt

Stell dir ein Paket vor, das von Deutschland nach Japan geschickt wird. Auf dem Etikett stehen Absender, Empfänger, Gewicht, Inhalt -- alles in einem standardisierten Format, das jeder Paketdienst weltweit lesen kann. Egal ob DHL, FedEx oder Japan Post.

JSON ist genau so ein standardisiertes Etikett -- nur für Daten. Egal ob dein Server mit Python läuft, deine App in Flutter geschrieben ist und dein Frontend React nutzt: Alle verstehen JSON. Es ist das universelle Datenformat, auf das sich die Softwarewelt geeinigt hat.

Was ist JSON?

JSON steht für JavaScript Object Notation. Trotz des Namens ist JSON nicht auf JavaScript beschränkt. Es ist ein eigenständiges, textbasiertes Datenformat, das von jeder Programmiersprache gelesen und geschrieben werden kann.

Die Idee dahinter: Daten in einem Format austauschen, das sowohl für Menschen lesbar als auch für Maschinen verarbeitbar ist. Und das hat JSON geschafft. Es ist simpler als XML, lesbarer als Binärformate und überall unterstützt.

JSON wurde Anfang der 2000er Jahre von Douglas Crockford popularisiert und hat sich seitdem als der Standard für Datenaustausch im Web etabliert. Wenn du heute eine API aufrufst, bekommst du in 99% der Fälle JSON zurück.

JSON-Syntax: Die Grundlagen

JSON kennt genau sechs Datentypen. Das war's. Keine Klassen, keine Vererbung, keine Magie.

Objekte

Ein JSON-Objekt ist eine Sammlung von Schlüssel-Wert-Paaren, eingeschlossen in geschweifte Klammern {}:

{
  "name": "Maximilian",
  "alter": 28,
  "entwickler": true
}

Jeder Schlüssel ist ein String in doppelten Anführungszeichen. Der Wert kann ein beliebiger JSON-Typ sein.

Arrays

Ein Array ist eine geordnete Liste von Werten, eingeschlossen in eckige Klammern []:

{
  "sprachen": ["Dart", "JavaScript", "TypeScript", "Python"]
}

Strings

Immer in doppelten Anführungszeichen. Einfache Anführungszeichen sind nicht erlaubt:

{
  "nachricht": "Hallo Welt"
}

Zahlen

Ganze Zahlen und Dezimalzahlen, ohne Anführungszeichen:

{
  "preis": 49.99,
  "menge": 3
}

Booleans

true oder false, kleingeschrieben, ohne Anführungszeichen:

{
  "aktiv": true,
  "geloescht": false
}

Null

Der Wert "nichts", kleingeschrieben:

{
  "telefon": null
}

Praxis-Beispiel: Ein Nutzerprofil als JSON

So sieht ein typisches Nutzerprofil aus, wie es eine API zurückgeben könnte:

{
  "id": 42,
  "benutzername": "max_dev",
  "email": "max@example.com",
  "profil": {
    "vorname": "Maximilian",
    "nachname": "Flechtner",
    "avatar": "https://example.com/avatars/42.webp",
    "bio": "App-Entwickler aus Leidenschaft"
  },
  "einstellungen": {
    "theme": "dark",
    "sprache": "de",
    "benachrichtigungen": true
  },
  "projekte": [
    {
      "name": "Meine erste App",
      "technologie": "Flutter",
      "status": "live"
    },
    {
      "name": "Portfolio-Website",
      "technologie": "Nuxt",
      "status": "in-entwicklung"
    }
  ],
  "erstelltAm": "2024-03-15T10:30:00Z"
}

Schau dir an, wie gut das lesbar ist. Objekte in Objekten, ein Array von Projekten, verschiedene Datentypen -- und trotzdem versteht man sofort, was die Daten bedeuten. Das ist die Stärke von JSON.

JSON in der Praxis

JSON ist überall. Hier die drei häufigsten Anwendungsfälle:

API-Responses

Wenn deine App Daten von einem Server abruft, kommt die Antwort fast immer als JSON. Egal ob du REST oder GraphQL nutzt -- die Daten sind JSON.

Konfigurationsdateien

package.json, tsconfig.json, firebase.json -- unzählige Tools nutzen JSON für ihre Konfiguration. Du bearbeitest täglich JSON-Dateien, vielleicht ohne es bewusst zu merken.

Datenbanken

NoSQL-Datenbanken wie MongoDB oder Firestore speichern Daten als JSON-ähnliche Dokumente. Du schreibst JSON rein und bekommst JSON raus.

Code-Beispiel: JSON parsen

In JavaScript

// JSON-String zu JavaScript-Objekt
const jsonString = '{"name": "Max", "alter": 28}';
const user = JSON.parse(jsonString);
console.log(user.name); // "Max"

// JavaScript-Objekt zu JSON-String
const daten = { sprache: "Dart", level: "fortgeschritten" };
const json = JSON.stringify(daten, null, 2);
console.log(json);
// {
//   "sprache": "Dart",
//   "level": "fortgeschritten"
// }

JSON.parse() macht aus einem JSON-String ein JavaScript-Objekt. JSON.stringify() macht das Gegenteil. Der dritte Parameter (2) sorgt für hübsche Einrückung.

In Dart (Flutter)

import 'dart:convert';

// JSON-String zu Dart Map
final jsonString = '{"name": "Max", "alter": 28}';
final Map<String, dynamic> user = jsonDecode(jsonString);
print(user['name']); // "Max"

// Dart Map zu JSON-String
final daten = {'sprache': 'Dart', 'level': 'fortgeschritten'};
final json = jsonEncode(daten);
print(json);
// {"sprache":"Dart","level":"fortgeschritten"}

// Mit hübscher Formatierung
final encoder = JsonEncoder.withIndent('  ');
print(encoder.convert(daten));

In Dart nutzt du jsonDecode() und jsonEncode() aus dem dart:convert-Paket. In echten Flutter-Projekten arbeitet man meistens mit Model-Klassen und Bibliotheken wie json_serializable oder freezed, die das Mapping automatisch generieren.

JSON vs XML: Der Vergleich

Bevor JSON kam, war XML der Standard. Hier der direkte Vergleich:

Ein Beispiel macht den Unterschied deutlich. Dasselbe Nutzerprofil in XML:

<user>
  <name>Max</name>
  <alter>28</alter>
  <entwickler>true</entwickler>
  <sprachen>
    <sprache>Dart</sprache>
    <sprache>JavaScript</sprache>
  </sprachen>
</user>

Und in JSON:

{
  "name": "Max",
  "alter": 28,
  "entwickler": true,
  "sprachen": ["Dart", "JavaScript"]
}

JSON ist kürzer, lesbarer und einfacher zu parsen. Für neue Projekte gibt es kaum noch einen Grund, XML zu wählen -- es sei denn, du arbeitest mit Legacy-Systemen oder brauchst fortgeschrittene Schema-Validierung.

Häufige Fehler (und wie du sie vermeidest)

Ich sehe diese Fehler ständig, besonders bei Anfängern:

1. Trailing Commas

{
  "name": "Max",
  "alter": 28,  // FEHLER: Komma nach dem letzten Wert
}

In JavaScript ist ein Trailing Comma erlaubt. In JSON nicht. Das letzte Element darf kein Komma haben.

2. Einfache Anführungszeichen

{
  'name': 'Max'  // FEHLER: Einfache Anführungszeichen
}

JSON erlaubt nur doppelte Anführungszeichen. Keine einfachen, keine Backticks.

3. Kommentare

{
  "name": "Max",  // Das ist ein Kommentar -- FEHLER
  "alter": 28
}

JSON unterstützt keine Kommentare. Nicht mit //, nicht mit /* */. Wenn du Kommentare brauchst, nutze ein Format wie JSONC (JSON with Comments) oder YAML.

4. Unquoted Keys

{
  name: "Max"  // FEHLER: Schlüssel ohne Anführungszeichen
}

Schlüssel müssen immer Strings in doppelten Anführungszeichen sein.

Tipp: Nutze einen JSON-Validator wie jsonlint.com, um dein JSON zu überprüfen. Oder lass deinen Editor die Arbeit machen -- VS Code markiert JSON-Fehler sofort.

Fazit

JSON ist eines der einfachsten und nützlichsten Konzepte in der Softwareentwicklung. Sechs Datentypen, eine simple Syntax, universelle Unterstützung. Wenn du JSON verstehst, verstehst du, wie Daten im modernen Web fließen.

Und das Beste: Du brauchst es nicht auswendig zu lernen. Nach ein paar Tagen mit APIs und Konfigurationsdateien liest und schreibst du JSON im Schlaf. Es ist das Format, das du am häufigsten sehen wirst -- egal ob du APIs aufrufst, REST oder GraphQL nutzt oder Konfigurationen bearbeitest.

Fang einfach an. Öffne eine package.json in deinem nächsten Projekt und schau sie dir an. Du wirst überrascht sein, wie viel du jetzt schon verstehst.

Häufig gestellte Fragen