TypeError: cyclic object value

Der JavaScript-Fehler "cyclic object value" tritt auf, wenn Objektverweise in JSON gefunden werden. JSON.stringify() versucht nicht, diese zu lösen, und scheitert entsprechend.

Nachricht

TypeError: Converting circular structure to JSON (V8-based)
TypeError: cyclic object value (Firefox)
TypeError: JSON.stringify cannot serialize cyclic structures. (Safari)

Fehlerart

TypeError

Was ist schiefgelaufen?

Das JSON-Format unterstützt an sich keine Objektverweise (obwohl ein IETF-Draft existiert), daher versucht JSON.stringify() nicht, sie zu lösen, und scheitert entsprechend.

Beispiele

Zirkuläre Referenzen

In einer zirkulären Struktur wie der folgenden:

js
const circularReference = { otherData: 123 };
circularReference.myself = circularReference;

wird JSON.stringify() fehlschlagen

js
JSON.stringify(circularReference);
// TypeError: cyclic object value

Um zirkuläre Referenzen zu serialisieren, können Sie eine Bibliothek verwenden, die sie unterstützt (z.B. cycle.js) oder selbst eine Lösung implementieren, die das Finden und Ersetzen (oder Entfernen) der zyklischen Referenzen durch serialisierbare Werte erfordert.

Der folgende Codeausschnitt zeigt, wie man mit dem replacer-Parameter von JSON.stringify() eine zyklische Referenz findet und filtert (was zu Datenverlust führt):

js
function getCircularReplacer() {
  const ancestors = [];
  return function (key, value) {
    if (typeof value !== "object" || value === null) {
      return value;
    }
    // `this` is the object that value is contained in,
    // i.e., its direct parent.
    while (ancestors.length > 0 && ancestors.at(-1) !== this) {
      ancestors.pop();
    }
    if (ancestors.includes(value)) {
      return "[Circular]";
    }
    ancestors.push(value);
    return value;
  };
}

JSON.stringify(circularReference, getCircularReplacer());
// {"otherData":123,"myself":"[Circular]"}

const o = {};
const notCircularReference = [o, o];
JSON.stringify(notCircularReference, getCircularReplacer());
// [{},{}]

Siehe auch