Zum Hauptinhalt springen

JSON-Datenformat verstehen 📦

Wenn Sie APIs lernen, hören Sie oft das Wort JSON. JSON ist ein Format, das Programme verwenden, um Daten auszutauschen. Ich werde es sehr einfach erklären!

JSON mit dem Alltag vergleichen?​

Vergleichen wir JSON mit einem Paketetikett.

📦 Paket
┌──────────────────┐
│ Empfänger: Max Müller │
│ Adresse: Berlin Mitte │
│ Telefon: 030-1234-567 │
│ Artikel: Buch        │
└──────────────────┘

Wenn wir diese Informationen in JSON schreiben:

{
  "empfaenger": "Max Müller",
  "adresse": "Berlin Mitte",
  "telefon": "030-1234-567",
  "artikel": "Buch"
}

Der offizielle Name von JSON​

JSON = JavaScript Object Notation

Es bedeutet „JavaScript-Objektnotation", kann aber in allen Programmiersprachen verwendet werden!

Grundregeln von JSON​

1. Mit geschweiften Klammern umgeben​

{
  "name": "wert"
}

2. Doppelte Anführungszeichen " " verwenden​

{
  "name": "Max Müller"
}

3. Name und Wert mit Doppelpunkt : verbinden​

{
  "alter": 25
}

4. Mehrere Informationen mit Kommas , trennen​

{
  "name": "Max Müller",
  "alter": 25,
  "beruf": "Entwickler"
}

JSON-Datentypen​

Werte, die in JSON verwendet werden können:

1. Zeichenkette (String) ""​

{
  "name": "Max Müller",
  "stadt": "Berlin"
}

2. Zahl (Number)​

{
  "alter": 25,
  "groesse": 175.5,
  "temperatur": -5
}

3. Boolescher Wert (Boolean)​

{
  "registrierungAbgeschlossen": true,
  "emailVerifiziert": false
}

4. Array (Array) [ ]​

Zum Speichern mehrerer Elemente:

{
  "hobbys": ["Lesen", "Kino", "Programmieren"],
  "punkte": [90, 85, 95]
}

5. Objekt (Object) ​

Zum Gruppieren von Informationen:

{
  "benutzer": {
    "name": "Max Müller",
    "alter": 25
  }
}

6. null​

Wenn kein Wert vorhanden ist:

{
  "zweitname": null
}

Mit realen Beispielen verstehen​

Beispiel 1: Benutzerinformationen 👤​

{
  "name": "Max Müller",
  "alter": 25,
  "email": "max@example.com",
  "mitglied": true,
  "adresse": {
    "stadt": "Berlin",
    "bezirk": "Mitte"
  },
  "hobbys": ["Lesen", "Filme schauen", "Programmieren"]
}

Beispiel 2: Online-Shop-Produkt 🛍️​

{
  "produkt": "Laptop",
  "preis": 1200,
  "lagerbestand": 5,
  "imAngebot": true,
  "farben": ["Silber", "Grau", "Schwarz"],
  "spezifikationen": {
    "CPU": "i7",
    "RAM": "16GB",
    "speicher": "512GB SSD"
  }
}

Beispiel 3: Wetterinformationen ☀️​

{
  "stadt": "Berlin",
  "temperatur": 23,
  "wetter": "sonnig",
  "luftfeuchtigkeit": 60,
  "regenwahrscheinlichkeit": 0,
  "wochenvorhersage": [
    {"tag": "Mo", "temperatur": 22},
    {"tag": "Di", "temperatur": 24},
    {"tag": "Mi", "temperatur": 25}
  ]
}

JSON-Arrays verstehen​

Zum Speichern mehrerer Daten verwenden Sie eckige Klammern [ ]:

Einfaches Array​

["Apfel", "Banane", "Orange"]

Array von Objekten​

[
  {
    "name": "Max Müller",
    "alter": 25
  },
  {
    "name": "Peter Schmidt",
    "alter": 30
  },
  {
    "name": "Anna Weber",
    "alter": 28
  }
]

JSON lesen​

{
  "student": {
    "name": "Max Müller",
    "punkte": [90, 85, 95],
    "bestanden": true
  }
}

So liest man es:

  • „Es gibt Informationen über einen Studenten"
  • „Sein Name ist Max Müller"
  • „Die Punkte sind 90, 85, 95"
  • „Bestanden ist true (wahr)"

JSON vs andere Formate​

JSON vs CSV​

CSV (Tabellenformat wie Excel):

name,alter,stadt
Max Müller,25,Berlin
Peter Schmidt,30,München

JSON:

[
  {"name": "Max Müller", "alter": 25, "stadt": "Berlin"},
  {"name": "Peter Schmidt", "alter": 30, "stadt": "München"}
]

Vorteile von JSON:

  • Kann komplexe Strukturen ausdrücken
  • Stellt verschachtelte Daten einfach dar
  • Wird als Standard in APIs verwendet

Praktische Anwendungsbeispiele​

API-Antwortbeispiel​

Wenn Sie Benutzerinformationen von der GitHub API anfordern:

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  "location": "San Francisco",
  "public_repos": 344,
  "followers": 1000000,
  "following": 0
}

Konfigurationsdateibeispiel​

Programmkonfiguration in JSON:

{
  "appName": "Meine Website",
  "version": "1.0.0",
  "datenbank": {
    "host": "localhost",
    "port": 3306,
    "benutzer": "admin"
  },
  "funktionen": {
    "dunklerModus": true,
    "benachrichtigungen": true,
    "automatischesSpeichern": false
  }
}

JSON-Tools verwenden​

Probieren Sie JSON mit den Tools unserer Website aus!

1. JSON formatieren​

JSON Formatter - Machen Sie komplexes JSON lesbar!

2. JSON-Daten erkunden​

JSON Path Tester - Finden Sie die benötigten Daten in JSON

3. JSON in andere Formate konvertieren​

Häufige Fehler und Lösungen​

❌ Fehler 1: Komma vergessen​

{
  "name": "Max Müller"
  "alter": 25
}

✅ Richtige Methode:​

{
  "name": "Max Müller",
  "alter": 25
}

❌ Fehler 2: Komma am Ende hinzufügen​

{
  "name": "Max Müller",
  "alter": 25,
}

✅ Richtige Methode:​

{
  "name": "Max Müller",
  "alter": 25
}

❌ Fehler 3: Einfache Anführungszeichen verwenden​

{
  'name': 'Max Müller'
}

✅ Richtige Methode:​

{
  "name": "Max Müller"
}

❌ Fehler 4: Kommentare schreiben​

{
  // Dies ist ein Kommentar
  "name": "Max Müller"
}

Kommentare können in JSON nicht geschrieben werden! ❌

Wo JSON verwendet wird​

1. API-Kommunikation 🌐​

Die meisten Web-APIs tauschen Daten in JSON aus.

// API-Anfrage
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))

2. Konfigurationsdateien ⚙️​

  • package.json (Node.js)
  • tsconfig.json (TypeScript)
  • settings.json (VS Code)

3. Datenspeicherung 💾​

NoSQL-Datenbanken (MongoDB usw.) speichern Daten im JSON-Format.

4. Datenaustausch 📤📥​

Wenn Server und Client Daten austauschen.

Häufig gestellte Fragen (FAQ)​

F1: Ist JSON eine Programmiersprache?​

A: Nein! JSON ist ein Datenformat. Es ist einfach eine Möglichkeit, Daten darzustellen.

F2: Wird JSON nur mit JavaScript verwendet?​

A: Nein! Es kann in fast allen Programmiersprachen verwendet werden.

  • Python
  • Java
  • C++
  • PHP
  • Ruby Und viele mehr!

F3: Was ist der Unterschied zwischen JSON und XML?​

A: XML war ein zuvor häufig verwendetes Format. JSON ist einfacher und leichter zu lesen, daher wird jetzt mehr JSON verwendet.

XML:

<user>
  <name>Max Müller</name>
  <age>25</age>
</user>

JSON:

{
  "name": "Max Müller",
  "age": 25
}

F4: Was ist die JSON-Dateierweiterung?​

A: Es ist .json.

data.json
config.json
users.json

JSON-Validierung​

Um zu überprüfen, ob JSON das richtige Format hat:

  1. JSON Formatter verwenden
  2. Online-JSON-Validierungstools verwenden
  3. In den Browser-Entwicklertools überprüfen

Übung: Erstellen Sie Ihr eigenes JSON​

Erstellen Sie Ihre Informationen in JSON:

{
  "name": "Ihr Name",
  "alter": ihr_alter,
  "wohnort": "Ihre Stadt",
  "hobbys": [
    "hobby1",
    "hobby2",
    "hobby3"
  ],
  "student": true,
  "vorstellung": {
    "lieblingsessen": "...",
    "lieblingsfarbe": "..."
  }
}
Tipp

Fügen Sie es in JSON Formatter ein und drücken Sie die Schaltfläche „Format"! Es wird schön organisiert und Sie können auch Syntaxfehler überprüfen.

Nächste Schritte 🚀​

Wenn Sie JSON verstanden haben:

  1. ✅ JSON Formatter - JSON formatieren
  2. ✅ JSON Path Tester - JSON-Daten durchsuchen
  3. ✅ API Tester - APIs testen, die JSON verwenden
  4. ✅ JSON to TypeScript - JSON in Code konvertieren

Zusammenfassung​

JSON ist nicht schwierig! Es ist eine Möglichkeit, Daten zu organisieren.

Punkte zum Merken:

  • { } Beginnt und endet mit geschweiften Klammern
  • " " Doppelte Anführungszeichen verwenden
  • : Name und Wert mit Doppelpunkt verbinden
  • , Elemente mit Kommas trennen
  • Kein Komma nach dem letzten Element

Können Sie jetzt JSON lesen und schreiben? 🎉

Wenn Sie APIs lernen und Webentwicklung machen möchten, ist JSON unerlässlich. Sie werden sich schnell daran gewöhnen, wenn Sie es oft sehen!