← Alle Artikel

JSON.parse-Fehler „Unexpected Token" beheben

„Unexpected token '<'" oder „Unexpected token u in JSON at position 0" — diese Fehler bringen deine App zum Stoppen. Hier, was jede Variante bedeutet und exakt, wie du sie behebst.

Du starrst auf einen roten Stack-Trace: SyntaxError: Unexpected token '<', "..." is not valid JSON. Oder vielleicht Unexpected token u in JSON at position 0. So oder so: JSON.parse() hat sich geweigert und dein Code steht. Diese Anleitung erklärt genau, was jede Variante dieses Fehlers bedeutet, warum sie auftritt und wie du sie schnell behebst.

Wie der Fehler tatsächlich aussieht

Die Wortwahl variiert je nach JavaScript-Engine, aber alle meinen dasselbe: Der Parser ist an einer bestimmten Position deines Strings auf ein Zeichen gestoßen, das er nicht erwartet hat.

// V8 (Chrome, Node.js, Edge)
SyntaxError: Unexpected token '<', "<html>..." is not valid JSON
SyntaxError: Unexpected token 'u', "undefined" is not valid JSON
SyntaxError: Unexpected token u in JSON at position 0  // älteres V8
SyntaxError: Expected ',' or '}' after property value in JSON at position 42

// Firefox (SpiderMonkey)
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data

// Safari (JavaScriptCore)
SyntaxError: JSON Parse error: Unexpected identifier "undefined"
SyntaxError: JSON Parse error: Single quotes (') are not allowed in JSON

Die wichtige Info besteht immer aus zwei Teilen: welches Zeichen unerwartet war und wo. Das Zeichen sagt dir, was der Parser tatsächlich bekommen hat; die Position sagt dir, wo im String du schauen sollst.

Ursache 1: Der Server hat HTML statt JSON zurückgegeben

Das ist die häufigste Ursache für Unexpected token '<'. Dein fetch oder AJAX-Aufruf hat eine HTML-Seite zurückbekommen —— meist eine 404-Seite, einen Login-Redirect oder einen Server-Error —— statt des erwarteten JSON. Das < ist das öffnende <!DOCTYPE html> oder <html>-Tag.

// ❌ Das crasht mit "Unexpected token '<'"
const res  = await fetch('/api/user');
const data = await res.json(); // Server hat HTML 404 zurückgegeben

// ✅ Prüfe zuerst den Status der Antwort
const res = await fetch('/api/user');
if (!res.ok) {
  throw new Error(`HTTP ${res.status}: ${res.statusText}`);
}
const data = await res.json();

Prüfe immer res.ok (oder res.status), bevor du res.json() aufrufst. Du kannst auch erst den rohen Antworttext ansehen:

const text = await res.text();
console.log(text.slice(0, 200)); // schau, was du wirklich bekommen hast
const data = JSON.parse(text);

Ursache 2: Der Wert ist undefined

Unexpected token 'u' an Position 0 bedeutet fast immer, dass du JSON.parse(undefined) aufgerufen hast. Der String "undefined" beginnt mit dem Buchstaben u, der kein gültiges JSON-Startzeichen ist.

// ❌ Variable wurde nie gesetzt
const raw = localStorage.getItem('settings'); // gibt null bei fehlendem Key
JSON.parse(raw);  // null ist okay, aber wenn raw irgendwie undefined ist...

// ❌ Async-Daten noch nicht geladen
JSON.parse(this.state.data); // data ist beim ersten Render undefined

// ✅ Guard vor dem Parsen
if (raw) {
  const data = JSON.parse(raw);
}

Beachte: localStorage.getItem() gibt für fehlende Keys null (nicht undefined) zurück, und JSON.parse(null) gibt ohne Fehler null zurück. Übliche Verdächtige sind nicht initialisierte State-Variablen oder ein fehlendes Funktionsargument.

Ursache 3: Einfache statt doppelte Anführungszeichen

// ❌ SyntaxError: Unexpected token '''
JSON.parse("{'name': 'Ada'}");

// ✅ JSON verlangt doppelte Anführungszeichen
JSON.parse('{"name": "Ada"}')

JavaScript-Objektliterale akzeptieren einfache Anführungszeichen. JSON nicht —— alle Strings, inklusive Keys, müssen doppelte Anführungszeichen nutzen. Das passiert oft, wenn jemand Daten mit Pythons str()-Funktion statt mit json.dumps() serialisiert oder ein Objektliteral direkt kopiert.

Ursache 4: Trailing Comma

// ❌ SyntaxError: Unexpected token '}'
JSON.parse('{"name": "Ada", "score": 98,}');
//                                       ^ Trailing Comma

// ✅
JSON.parse('{"name": "Ada", "score": 98}')

Modernes JavaScript erlaubt Trailing Commas in Arrays und Objekten. JSON nicht. Handgepflegte JSON-Configdateien sind die häufigste Quelle dieses Fehlers.

Ursache 5: Keys ohne Anführungszeichen

// ❌ SyntaxError: Unexpected token 'n'
JSON.parse("{name: 'Ada'}");

// ✅
JSON.parse('{"name": "Ada"}')

Objekt-Keys in JSON müssen immer Strings in doppelten Anführungszeichen sein. Nackte Bezeichner wie name sind in JavaScript-Objektliteralen gültig, aber nicht in JSON.

Ursache 6: Kommentare im JSON

// ❌ SyntaxError: Unexpected token '/'
JSON.parse(`{
  // Benutzerdatensatz
  "name": "Ada"
}`);

// ✅ Entferne Kommentare vor dem Parsen (oder nutze einen JSONC-Parser)
const stripped = raw.replace(///.*$/gm, '').replace(//*[sS]*?*//g, '');
JSON.parse(stripped);

JSON hat keine Kommentar-Syntax. Kommentare werden häufig zu Configdateien hinzugefügt (das JSONC-Format), aber das Standard-JSON.parse() lehnt sie sofort ab.

Ursache 7: Ein BOM oder unsichtbares Zeichen an Position 0

Wenn der Fehler Position 0 sagt, das erste sichtbare Zeichen aber okay aussieht, hängt evtl. ein unsichtbares Byte-Order-Mark (BOM, U+FEFF) oder ein anderes Steuerzeichen am Stringanfang —— typisch beim Lesen einer Datei, die unter Windows mit UTF-8-BOM-Kodierung gespeichert wurde.

// ✅ Entferne BOM vor dem Parsen
const clean = raw.replace(/^/, '');
JSON.parse(clean);

Ursache 8: Tokens I oder N —— Infinity und NaN

Wenn der Fehler Unexpected token I oder Unexpected token N lautet, hat die Quelle Infinity, -Infinity oder NaN produziert —— alles in JavaScript gültig, aber nicht in JSON.

// ❌ Fehler auf Producer-Seite
const json = '{"ratio": NaN, "limit": Infinity}';
JSON.parse(json); // Unexpected token N (or I) ...

// ✅ Kodiere sie absichtlich
const safe = JSON.stringify({ ratio: NaN, limit: Infinity });
// → '{"ratio":null,"limit":null}'  (Hinweis: verlustbehaftet —— beide werden null)

// ✅ Verlustfrei: kodiere als Sentinel-String, den du selbst zurückparst
JSON.stringify({ ratio: 'NaN', limit: 'Infinity' });

JSON.stringify konvertiert NaN / Infinity stillschweigend zu null. Wenn du sie für Round-Trips brauchst, ersetze sie beim Ausgehen durch einen Sentinel-String und parse sie beim Eingehen zurück.

So findest du die exakte Fehlerposition

Die Fehlermeldung enthält eine Positionsnummer. Nutze sie, um den String zu slicen und zu sehen, was genau dort steht:

function parseWithContext(text) {
  try {
    return JSON.parse(text);
  } catch (err) {
    // Position aus V8-Fehlermeldung extrahieren
    const match = err.message.match(/position (\d+)/);
    if (match) {
      const pos = Number(match[1]);
      const snippet = text.slice(Math.max(0, pos - 20), pos + 20);
      console.error(`Error near: ..."${snippet}"...`);
      console.error(`             ${''.padStart(Math.min(pos, 20), ' ')}^`);
    }
    throw err;
  }
}

Häufig gestellte Fragen

Was bedeutet „Unexpected token in JSON"?

Es heißt, dass JSON.parse() an dieser Stelle der Grammatik auf ein ungültiges Zeichen gestoßen ist. Das genannte Token sagt dir, was empfangen wurde (< = HTML, u = undefined, ' = einfaches Anführungszeichen) und die Position sagt dir, wo du schauen sollst.

Warum passiert „Unexpected token '<'" bei fetch?

Dein Request hat eine HTML-Seite zurückgegeben —— ein 404, Login-Redirect oder Server-Error —— statt JSON, und < ist das öffnende HTML-Tag. Prüfe response.ok vor dem Aufruf von response.json() und logge await response.text(), um zu sehen, was wirklich zurückkam.

Wie behebe ich „Unexpected token u in JSON at position 0"?

Du hast undefined an JSON.parse() übergeben. Guard den Wert zuerst (if (raw) JSON.parse(raw)) und prüfe auf nicht initialisierten State oder ein fehlendes Funktionsargument. Die eng verwandte token o-Variante wird in Unexpected token o in JSON behandelt.

Wie finde ich die exakte Position des Fehlers?

Lies die Positionsnummer aus der Fehlermeldung und slice den String drum herum (siehe Snippet oben) oder füge das JSON in JSON Fix ein, der die fehlerhafte Zeile markiert.

Die schnellste Behebung: Einfügen und online reparieren

Wenn du einen kaputten JSON-String hast und ihn jetzt repariert haben willst, behandelt JSON Fix alle obigen Ursachen automatisch —— einfache Anführungszeichen, Trailing Commas, Keys ohne Anführungszeichen, Kommentare, Python-Literale und mehr. Füge dein JSON ein, klicke Repair & Format und bekomme in einem Schritt sauberes, gültiges JSON zurück. Alles läuft im Browser; nichts wird an einen Server gesendet.