JavaScript und JSON: Vollständige Anleitung für Web-Entwickler

# JavaScript und JSON: Vollständige Anleitung

Ein umfassender Leitfaden für die Arbeit mit JSON in JavaScript und TypeScript.

Einführung

JSON (JavaScript Object Notation) stammt von JavaScript und ist daher nativ in die Sprache integriert. JavaScript bietet leistungsstarke Methoden zum Parsen und Generieren von JSON.

Warum JSON und JavaScript perfekt zusammenpassen

• JSON basiert auf JavaScript-Objektnotation
• Native Unterstützung ohne externe Bibliotheken
• Schnelle Performance
• Einfache Konvertierung zwischen Objekten und JSON

Grundlagen

JSON.parse() - String zu Objekt

// JSON-String zu JavaScript-Objekt
const jsonString = '{"name": "Max", "alter": 30, "stadt": "Berlin"}';
const obj = JSON.parse(jsonString);

console.log(obj.name);   // "Max"
console.log(obj.alter);  // 30
console.log(typeof obj); // "object"

JSON.stringify() - Objekt zu String

// JavaScript-Objekt zu JSON-String
const benutzer = {
  name: "Max Mustermann",
  alter: 30,
  stadt: "Berlin",
  aktiv: true
};

const jsonString = JSON.stringify(benutzer);
console.log(jsonString);
// {"name":"Max Mustermann","alter":30,"stadt":"Berlin","aktiv":true}

Pretty Print mit Einrückung

const obj = {
  name: "Max",
  adresse: {
    stadt: "Berlin",
    plz: "10115"
  }
};

// Mit 2 Leerzeichen Einrückung
const formatiert = JSON.stringify(obj, null, 2);
console.log(formatiert);
/

{
  "name": "Max",
  "adresse": {
    "stadt": "Berlin",
    "plz": "10115"
  }
}
/

Erweiterte Funktionen

replacer-Funktion

const benutzer = {
  name: "Max",
  passwort: "geheim123",
  email: "max@example.de",
  apiKey: "sk_live_123"
};

// Sensible Daten filtern
const sicher = JSON.stringify(benutzer, (key, value) => {
  if (key === 'passwort' || key === 'apiKey') {
    return undefined;  // Wird ausgelassen
  }
  return value;
}, 2);

console.log(sicher);
/

{
  "name": "Max",
  "email": "max@example.de"
}
/

replacer als Array

const benutzer = {
  id: 1,
  name: "Max",
  email: "max@example.de",
  passwort: "geheim",
  interneDaten: { ... }
};

// Nur bestimmte Felder exportieren
const exportiert = JSON.stringify(benutzer, ['id', 'name', 'email'], 2);
console.log(exportiert);
/

{
  "id": 1,
  "name": "Max",
  "email": "max@example.de"
}
/

reviver-Funktion

// Datums-Strings zu Date-Objekten konvertieren
const jsonString = '{"name":"Max","erstellt":"2026-01-26T12:00:00.000Z"}';

const obj = JSON.parse(jsonString, (key, value) => {
  // ISO-Datum-Strings erkennen
  if (typeof value === 'string' && /^d{4}-d{2}-d{2}T/.test(value)) {
    return new Date(value);
  }
  return value;
});

console.log(obj.erstellt instanceof Date); // true
console.log(obj.erstellt.getFullYear());   // 2026

toJSON()-Methode

class Benutzer {
  constructor(name, email, passwort) {
    this.name = name;
    this.email = email;
    this.passwort = passwort;
  }

  // Custom JSON-Serialisierung
  toJSON() {
    return {
      name: this.name,
      email: this.email
      // passwort wird ausgelassen
    };
  }
}

const benutzer = new Benutzer("Max", "max@example.de", "geheim");
console.log(JSON.stringify(benutzer, null, 2));
/

{
  "name": "Max",
  "email": "max@example.de"
}
/

Fehlerbehandlung

Ungültiges JSON abfangen

const ungueltigesJSON = '{"name": "Max", "alter": 30,}'; // Trailing comma

try {
  const obj = JSON.parse(ungueltigesJSON);
} catch (error) {
  console.error('JSON-Parsing-Fehler:', error.message);
  // JSON-Parsing-Fehler: Unexpected token } in JSON at position 27

  console.log('Position:', error.message.match(/\d+/)?.[0]);
}

Sichere Parse-Funktion

function parseJSONSicher(jsonString, fallback = null) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error('Fehler beim Parsen:', error.message);
    return fallback;
  }
}

// Verwendung
const daten = parseJSONSicher('{"name": "Max"}', {});
const ungueltig = parseJSONSicher('ungültig', { fehler: true });

Validierung

function istGueltigesJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch {
    return false;
  }
}

console.log(istGueltigesJSON('{"name": "Max"}'));  // true
console.log(istGueltigesJSON('{name: "Max"}'));    // false (einfache Anführungszeichen)

API-Requests

Fetch API mit JSON

// GET-Request
async function holeBenutzer(id) {
  try {
    const response = await fetch(https://api.example.com/benutzer/\\${id});

    if (!response.ok) {
      throw new Error(HTTP-Fehler: \\${response.status});
    }

    const daten = await response.json();
    return daten;
  } catch (error) {
    console.error('Fehler beim Laden:', error);
    return null;
  }
}

// Verwendung
const benutzer = await holeBenutzer(123);
console.log(benutzer);

POST mit JSON

async function erstelleBenutzer(benutzerDaten) {
  try {
    const response = await fetch('https://api.example.com/benutzer', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(benutzerDaten)
    });

    if (!response.ok) {
      throw new Error(HTTP-Fehler: \\${response.status});
    }

    const neuerBenutzer = await response.json();
    return neuerBenutzer;
  } catch (error) {
    console.error('Fehler beim Erstellen:', error);
    return null;
  }
}

// Verwendung
const neuerBenutzer = await erstelleBenutzer({
  name: "Max Mustermann",
  email: "max@example.de",
  alter: 30
});

Mit axios

import axios from 'axios';

// GET
const response = await axios.get('https://api.example.com/benutzer/123');
console.log(response.data); // Automatisch geparst

// POST
const neuerBenutzer = await axios.post('https://api.example.com/benutzer', {
  name: "Max",
  email: "max@example.de"
});
// axios serialisiert automatisch zu JSON

// Mit Fehlerbehandlung
try {
  const response = await axios.get('/api/daten');
  console.log(response.data);
} catch (error) {
  if (error.response) {
    console.error('Server-Fehler:', error.response.status);
    console.error('Daten:', error.response.data);
  } else {
    console.error('Netzwerkfehler:', error.message);
  }
}

LocalStorage und SessionStorage

Daten speichern

const benutzerEinstellungen = {
  theme: 'dunkel',
  sprache: 'de',
  benachrichtigungen: true
};

// Im LocalStorage speichern
localStorage.setItem('einstellungen', JSON.stringify(benutzerEinstellungen));

// Im SessionStorage speichern
sessionStorage.setItem('sitzung', JSON.stringify({ userId: 123 }));

Daten laden

// Aus LocalStorage laden
const einstellungenString = localStorage.getItem('einstellungen');
const einstellungen = einstellungenString ? JSON.parse(einstellungenString) : null;

if (einstellungen) {
  console.log('Theme:', einstellungen.theme);
}

Helper-Funktionen

// Sicherer Storage-Helper
const storage = {
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch (error) {
      console.error('Storage-Fehler:', error);
      return false;
    }
  },

  get(key, defaultValue = null) {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : defaultValue;
    } catch (error) {
      console.error('Parse-Fehler:', error);
      return defaultValue;
    }
  },

  remove(key) {
    localStorage.removeItem(key);
  },

  clear() {
    localStorage.clear();
  }
};

// Verwendung
storage.set('benutzer', { name: 'Max', id: 123 });
const benutzer = storage.get('benutzer');

Deep Copy mit JSON

Objekte klonen

const original = {
  name: "Max",
  adresse: {
    stadt: "Berlin",
    land: "Deutschland"
  },
  hobbys: ["Programmieren", "Musik"]
};

// Deep Copy
const kopie = JSON.parse(JSON.stringify(original));

// Änderungen an kopie betreffen original nicht
kopie.adresse.stadt = "München";
console.log(original.adresse.stadt); // "Berlin"
console.log(kopie.adresse.stadt);    // "München"

Einschränkungen

const obj = {
  datum: new Date(),
  regex: /test/,
  funktion: () => console.log('test'),
  undefined: undefined,
  symbol: Symbol('test'),
  zirkular: null
};
obj.zirkular = obj; // Zirkuläre Referenz

// JSON.stringify() verliert einige Datentypen
const json = JSON.stringify(obj, null, 2);
console.log(json);
/

{
  "datum": "2026-01-26T12:00:00.000Z",  // → String
  "regex": {},                           // → Leeres Objekt
  // funktion, undefined, symbol fehlen
}
/

// Zirkuläre Referenz wirft Fehler
try {
  JSON.stringify(obj);
} catch (error) {
  console.error(error.message); // Converting circular structure to JSON
}

Besondere Fälle

Große Zahlen

// JavaScript kann nur bis Number.MAX_SAFE_INTEGER präzise rechnen
const großeZahl = 9007199254740992; // 2^53
const json = JSON.stringify({ zahl: großeZahl });

// Für sehr große Zahlen, Strings verwenden
const präzise = JSON.stringify({ 
  zahl: großeZahl.toString() 
});

Binäre Daten (Base64)

// ArrayBuffer zu Base64
function arrayBufferToBase64(buffer) {
  const bytes = new Uint8Array(buffer);
  let binary = '';
  bytes.forEach(byte => binary += String.fromCharCode(byte));
  return btoa(binary);
}

// Base64 zu ArrayBuffer
function base64ToArrayBuffer(base64) {
  const binary = atob(base64);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  return bytes.buffer;
}

// Verwendung
const buffer = new Uint8Array([1, 2, 3, 4, 5]).buffer;
const json = JSON.stringify({
  daten: arrayBufferToBase64(buffer)
});

TypeScript Integration

Type-sichere JSON-Operationen

interface Benutzer {
  id: number;
  name: string;
  email: string;
  aktiv: boolean;
}

// Type-sicheres Parsen
function parseBenutzer(json: string): Benutzer | null {
  try {
    const obj = JSON.parse(json);

    // Runtime-Validierung
    if (
      typeof obj.id === 'number' &&
      typeof obj.name === 'string' &&
      typeof obj.email === 'string' &&
      typeof obj.aktiv === 'boolean'
    ) {
      return obj as Benutzer;
    }

    return null;
  } catch {
    return null;
  }
}

// Mit zod für bessere Validierung
import { z } from 'zod';

const BenutzerSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  aktiv: z.boolean()
});

type Benutzer = z.infer<typeof BenutzerSchema>;

function parseBenutzerSicher(json: string): Benutzer | null {
  try {
    const obj = JSON.parse(json);
    return BenutzerSchema.parse(obj);
  } catch (error) {
    console.error('Validierungsfehler:', error);
    return null;
  }
}

Performance-Optimierung

Großes JSON effizient verarbeiten

// Für sehr große Arrays - Chunked Processing
async function verarbeiteGroßesJSON(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  let buffer = '';

  while (true) {
    const { done, value } = await reader.read();

    if (done) break;

    buffer += decoder.decode(value, { stream: true });

    // Verarbeite vollständige JSON-Objekte
    let newlineIndex;
    while ((newlineIndex = buffer.indexOf('\n')) !== -1) {
      const line = buffer.slice(0, newlineIndex);
      buffer = buffer.slice(newlineIndex + 1);

      try {
        const obj = JSON.parse(line);
        // Verarbeite obj
        console.log(obj);
      } catch (error) {
        console.error('Parse-Fehler:', error);
      }
    }
  }
}

Caching

const jsonCache = new Map();

async function fetchMitCache(url) {
  // Prüfe Cache
  if (jsonCache.has(url)) {
    console.log('Aus Cache geladen');
    return jsonCache.get(url);
  }

  // Lade von Server
  const response = await fetch(url);
  const daten = await response.json();

  // Speichere im Cache
  jsonCache.set(url, daten);

  return daten;
}

Best Practices

1. Fehlerbehandlung immer einbauen

// ✅ Gut
try {
  const daten = JSON.parse(jsonString);
  // Verarbeite daten
} catch (error) {
  console.error('JSON-Fehler:', error);
  // Fallback
}

// ❌ Schlecht
const daten = JSON.parse(jsonString); // Kann crashen!

2. Validierung nach dem Parsen

// ✅ Gut
const obj = JSON.parse(jsonString);
if (obj && typeof obj.name === 'string' && typeof obj.id === 'number') {
  // Verwende obj
}

// ❌ Schlecht - keine Validierung
const obj = JSON.parse(jsonString);
console.log(obj.name.toUpperCase()); // Kann crashen!

3. Sensible Daten filtern

// ✅ Gut - sensible Daten entfernen
const exportiert = JSON.stringify(benutzer, (key, value) => {
  if (key === 'passwort') return undefined;
  return value;
});

4. Pretty Print für Debugging

// ✅ Für Debugging
console.log(JSON.stringify(obj, null, 2));

// Für Produktion (kleiner)
const minified = JSON.stringify(obj);

Zusammenfassung

Wichtigste Methoden

// Parsen
JSON.parse(jsonString)
JSON.parse(jsonString, reviver)

// Stringifyen
JSON.stringify(obj)
JSON.stringify(obj, replacer, space)

// Validieren
try {
  JSON.parse(str);
  return true;
} catch {
  return false;
}

Checkliste

✅ Immer try-catch bei JSON.parse()

✅ Validieren nach dem Parsen

✅ replacer für sensible Daten nutzen

✅ Einrückung für Debugging

✅ Type Guards in TypeScript

✅ Fehlerhafte Eingaben behandeln

Weiterführende Ressourcen

• Python und JSON
• JSON APIs und REST-Dienste
• Was ist JSON?
• JSON in TypeScript konvertieren