JSON

Geschätzte Lektüre: 17 Minuten 380 Ansichten

JSON (JavaScript Object Notation) ist ein leichtgewichtiges Datenformat, das sowohl für Menschen lesbar als auch für Maschinen einfach zu verarbeiten ist. Es hat sich als De-facto-Standard für den Datenaustausch zwischen Client und Server im Web etabliert. Der besondere Reiz von JSON liegt in seiner Einfachheit und der nahtlosen Integration mit JavaScript, da es direkt aus dem Sprachkern von JavaScript abgeleitet ist.

JSON basiert auf zwei fundamentalen Strukturen:
• Sammlungen von Name-Wert-Paaren (in verschiedenen Sprachen als Objekt, Record, Struct, Dictionary oder Hash realisiert)
• Geordnete Listen von Werten (meist als Array, Vector, List oder Sequence implementiert)

Ein einfaches JSON-Beispiel:

{
  "name": "Anna Müller",
  "alter": 28,
  "beruf": "Softwareentwicklerin",
  "hobbys": ["Lesen", "Schwimmen", "Fotografie"],
  "adresse": {
    "straße": "Musterweg 123",
    "stadt": "Berlin",
    "plz": "10115"
  }
}

JSON-Syntax im Detail

Die JSON-Syntax folgt strengen Regeln, die von JavaScript-Objekten inspiriert sind, aber restriktiver sind:
• Daten werden in Schlüssel-Wert-Paaren dargestellt, getrennt durch Doppelpunkte
• Schlüssel müssen immer in doppelten Anführungszeichen stehen
• Werte können sein:
— Strings (immer in doppelten Anführungszeichen)
— Zahlen (Integer oder Fließkomma)
— Boolesche Werte (true oder false)
— Arrays (in eckigen Klammern)
— Objekte (in geschweiften Klammern)
— null

Wichtiger Unterschied zu JavaScript-Objekten: JSON ist reine Textdarstellung und kann keine Funktionen oder undefinierte Werte enthalten. JavaScript-Objekte sind dagegen Speicherstrukturen mit zusätzlichen Fähigkeiten.

JSON in JavaScript verwenden

JavaScript bietet zwei zentrale Methoden für die Arbeit mit JSON:

JSON.parse()

Diese Methode konvertiert einen JSON-String in ein JavaScript-Objekt.

const jsonString = '{"name":"Max","age":30,"city":"Hamburg"}';
const jsObj = JSON.parse(jsonString);

console.log(jsObj.name); // Ausgabe: Max

Fehlerbehandlung: Da parse() bei ungültigem JSON einen Fehler wirft, sollte man try-catch verwenden:

let user;
try {
  user = JSON.parse('{"name":"Maria", age:32}');
  // Fehler: age nicht in Anführungszeichen
} catch (e) {
  console.error("Ungültiges JSON:", e.message);
  user = { name: "Default" };
}

JSON.stringify()

Diese Methode konvertiert ein JavaScript-Objekt in einen JSON-String.

const person = {
  name: "Klaus",
  age: 45,
  children: ["Lisa", "Tom"],
  isEmployed: true
};

const jsonStr = JSON.stringify(person);
console.log(jsonStr); 
// Ausgabe: 
// {"name":"Klaus","age":45,"children":["Lisa","Tom"],"isEmployed":true}

Erweiterte Nutzung: stringify() akzeptiert zwei optionale Parameter:
• Ein Replacer-Funktion oder Array zur Filterung
• Ein Leerzeichen-Parameter für die Formatierung

// Nur 'name' und 'children' im JSON behalten
console.log(JSON.stringify(person, ['name', 'children']));
// Ausgabe: {"name":"Klaus","children":["Lisa","Tom"]}

// Mit Formatierung (2 Leerzeichen Einrückung)
console.log(JSON.stringify(person, null, 2));
/*
Ausgabe:
{
  "name": "Klaus",
  "age": 45,
  "children": [
    "Lisa",
    "Tom"
  ],
  "isEmployed": true
}
*/

Komplexe JSON-Strukturen

JSON kann verschachtelte Strukturen beliebiger Tiefe darstellen, was es für komplexe Datenmodelle geeignet macht.

Beispiel einer komplexen Struktur:

{
  "unternehmen": "TechSolutions GmbH",
  "gruendungsjahr": 2010,
  "mitarbeiter": [
    {
      "id": 101,
      "name": "Sabine Mayer",
      "position": "Projektmanager",
      "skills": ["Agile", "Scrum", "Kanban"],
      "projekte": [
        {
          "name": "Kundenportal",
          "budget": 50000,
          "abgeschlossen": true
        },
        {
          "name": "Datenmigration",
          "budget": 75000,
          "abgeschlossen": false
        }
      ]
    },
    {
      "id": 102,
      "name": "Thomas Weber",
      "position": "Senior Developer",
      "skills": ["JavaScript", "Node.js", "React"],
      "projekte": [
        {
          "name": "Kundenportal",
          "budget": 50000,
          "abgeschlossen": true
        }
      ]
    }
  ],
  "standorte": {
    "hq": {
      "stadt": "München",
      "mitarbeiter": 25,
      "flaeche": 1200
    },
    "niederlassungen": [
      {
        "stadt": "Berlin",
        "mitarbeiter": 12,
        "flaeche": 600
      },
      {
        "stadt": "Hamburg",
        "mitarbeiter": 8,
        "flaeche": 400
      }
    ]
  }
}

JSON in der Praxis: API-Kommunikation

Die Hauptanwendung von JSON liegt im Datenaustausch zwischen Client und Server. Moderne Web-APIs verwenden fast ausschließlich JSON als Datenformat.

Beispiel: Daten von einer API abrufen (mit fetch API):

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const userData = await response.json(); // JSON automatisch parsen
    console.log(userData);
    displayUserProfile(userData);
  } catch (error) {
    console.error('Fehler beim Abrufen der Daten:', error);
  }
}

function displayUserProfile(user) {
  const profileDiv = document.getElementById('profile');
  profileDiv.innerHTML = `
    <h2>${user.name}</h2>
    <p>Email: ${user.email}</p>
    <p>Mitglied seit: ${new Date(user.registrationDate).toLocaleDateString()}</p>
    <h3>Skills:</h3>
    <ul>
      ${user.skills.map(skill => `<li>${skill}</li>`).join('')}
    </ul>
  `;
}

JSON Schema – Datenvalidierung

Für komplexe Anwendungen ist es oft notwendig, die Struktur von JSON-Daten zu validieren. Hier kommt JSON Schema ins Spiel – eine Möglichkeit, die erwartete Struktur von JSON-Dokumenten zu beschreiben.

Beispiel eines einfachen Schemas:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Person",
  "type": "object",
  "properties": {
    "firstName": {
      "type": "string",
      "minLength": 1
    },
    "lastName": {
      "type": "string",
      "minLength": 1
    },
    "age": {
      "description": "Alter in Jahren",
      "type": "integer",
      "minimum": 0
    },
    "address": {
      "type": "object",
      "properties": {
        "street": {"type": "string"},
        "city": {"type": "string"},
        "state": {"type": "string"},
        "postalCode": {"type": "string"}
      },
      "required": ["street", "city"]
    }
  },
  "required": ["firstName", "lastName"]
}

In JavaScript können Sie Bibliotheken wie ajv verwenden, um Daten gegen ein Schema zu validieren:

const Ajv = require('ajv');
const ajv = new Ajv();

const validate = ajv.compile(schema);
const valid = validate(data);

if (!valid) {
  console.log(validate.errors);
}

Leistungsaspekte und Best Practices

Bei der Arbeit mit großen JSON-Datenmengen sollten Sie folgende Punkte beachten:
• Streaming-Parser für große Dateien: Verwenden Sie Bibliotheken wie JSONStream, um Speicher zu sparen.
• Zirkuläre Referenzen: JavaScript-Objekte können zirkuläre Referenzen enthalten, die JSON.stringify() nicht verarbeiten kann.

const obj = { a: 1 };
obj.self = obj;
JSON.stringify(obj);
// TypeError: Converting circular structure to JSON

    Benutzerdefinierte Serialisierung: Sie können die toJSON()-Methode implementieren, um das Serialisierungsverhalten zu steuern.

    const person = {
  name: "Eva",
  birth: new Date(1990, 5, 15),
  toJSON: function() {
    return {
      name: this.name,
      birth: this.birth.toISOString()
    };
  }
};
JSON.stringify(person); // {"name":"Eva","birth":"1990-06-14T22:00:00.000Z"}

    JSON Alternativen und Erweiterungen

    Während JSON für viele Anwendungsfälle ideal ist, gibt es Situationen, in denen andere Formate besser geeignet sind:
    • MessagePack: Binäres Format, das kompakter ist als JSON
    • BSON: Binär-JSON, verwendet von MongoDB
    • YAML: Menschenfreundlicheres Format für Konfigurationsdateien
    • XML: Noch immer in einigen Enterprise-Umgebungen verbreitet

    Sicherheitsaspekte

    Beim Umgang mit JSON sind folgende Sicherheitsüberlegungen wichtig:
    • JSON-Injection: Ähnlich wie SQL-Injection, durch ungeprüfte Eingaben
    • eval()-Gefahr: Niemals JSON mit eval() parsen – immer JSON.parse() verwenden
    • Cross-Site Scripting (XSS): Bei der Ausgabe von JSON in HTML sicherstellen, dass es richtig escaped wird

    // UNSICHER!
const data = eval('(' + jsonString + ')');

// SICHER
const data = JSON.parse(jsonString);

    Fortgeschrittene Techniken

    Reviver-Funktion bei JSON.parse()

    Die Reviver-Funktion ermöglicht die Transformation der geparsten Daten:

    const jsonStr = '{"name":"Karl","birth":"1985-04-12T12:00:00.000Z"}';

const obj = JSON.parse(jsonStr, (key, value) => {
  if (key === 'birth') {
    return new Date(value);
  }
  return value;
});

console.log(obj.birth.getFullYear()); // 1985

    Replacer-Funktion bei JSON.stringify()

    Analog kann der Replacer die Serialisierung steuern:

    const meeting = {
  title: "Projektbesprechung",
  date: new Date(2023, 10, 15),
  participants: ["Anna", "Bert", "Claudia"]
};

const jsonStr = JSON.stringify(meeting, (key, value) => {
  if (value instanceof Date) {
    return value.toISOString().split('T')[0];
    // Nur das Datum behalten
  }
  return value;
});

console.log(jsonStr);
// {"title":"Projektbesprechung",
// "date":"2023-11-15","participants":["Anna","Bert","Claudia"]}

    JSON in verschiedenen JavaScript-Umgebungen

    • Node.js: Zusätzlich zum globalen JSON-Objekt bietet Node.js das fs-Modul zum Lesen und Schreiben von JSON-Dateien:

    const fs = require('fs');

// JSON-Datei lesen
const rawData = fs.readFileSync('data.json');
const data = JSON.parse(rawData);

// JSON-Datei schreiben
fs.writeFileSync('output.json', JSON.stringify(data, null, 2));

    • Browser: Moderne Browser unterstützen JSON nativ, aber für ältere Browser (IE7 und älter) benötigen Sie ein Polyfill wie json2.js.
    • Web Worker: JSON ist ideal für die Kommunikation zwischen Hauptthread und Workern, da es geklont und nicht gemeinsam genutzt wird.

    JSON und TypeScript

    In TypeScript können Sie Interfaces oder Typen definieren, um die Struktur Ihrer JSON-Daten zu beschreiben:

    interface User {
  id: number;
  name: string;
  email: string;
  roles: string[];
  lastLogin?: Date; // Optionales Feld
}

function parseUser(jsonStr: string): User {
  const user: User = JSON.parse(jsonStr);
  if (user.lastLogin) {
    user.lastLogin = new Date(user.lastLogin);
  }
  return user;
}

    JSON und Datenbanken

    Viele moderne Datenbanken unterstützen JSON nativ oder als Erweiterung:
    • MongoDB: Speichert Daten in BSON (Binär-JSON)
    • PostgreSQL: Hat einen JSON-Datentyp mit speziellen Abfrageoperatoren
    • MySQL: Bietet JSON-Typen und Funktionen seit Version 5.7

    Beispiel einer PostgreSQL JSON-Abfrage:

    SELECT 
  info->>'name' AS name,
  info->>'email' AS email
FROM users
WHERE info->>'status' = 'active'
ORDER BY info->>'name';

    JSON in der Konfiguration

    Viele Tools und Frameworks verwenden JSON für Konfigurationsdateien (z.B. package.json in Node.js, tsconfig.json in TypeScript).

    Beispiel einer komplexen Konfiguration:

    {
  "$schema": "./schema.json",
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

    Zukunft von JSON

    Während JSON seit über 20 Jahren existiert, entwickelt es sich weiter:
    • JSON5: Erweiterung mit Kommentaren, unquotierten Schlüsseln etc.
    • JSON Schema: Wird immer häufiger für API-Spezifikationen verwendet
    • JSON als Basis für viele neue Technologien (z.B. JSON-LD für semantisches Web)

    Unverzichtbares Werkzeug

    JSON hat sich als unverzichtbares Werkzeug in der JavaScript-Welt etabliert. Seine Einfachheit, Lesbarkeit und breite Unterstützung machen es zum idealen Format für Datenaustausch und Konfiguration. Durch das tiefe Verständnis von JSON und seinen JavaScript-Integrationen können Entwickler effizienter arbeiten und robustere Anwendungen erstellen. Die Kombination aus menschlicher Lesbarkeit und maschineller Effizienz sichert JSON auch in Zukunft einen zentralen Platz in der Webentwicklung.

    Dieses Dokument teilen

    JSON

    Oder Link kopieren

    INHALT

    Abonnieren

    ×
    Cancel