HOWTO · JavaScript

TypeError: 循環構造を JSON に変換しています

この記事は、TypeError: Converting circle structure to JSON in JavaScript の問題を解決するのに役立ちます。

このページの内容

JSON.stringify() 関数への循環参照を含むオブジェクトを送信すると、TypeError: Converting circle structure to JSON 問題が発生します。 オブジェクトを JSON に変換する前に、循環参照を避けてください。

JavaScript の TypeError: 循環構造を JSON に変換する を修正

この問題は、flatted パッケージ を使用して解決できます。 flatted パッケージは、CircularJSON の発明者から直接提供された、信じられないほど軽量で高速な Circular JSON パーサーです。

まず、flatted パッケージをインストールする必要があります。次の方法でインストールできます。

npm i flatted

flatted パッケージの使用例を見てみましょう。

const {parse, stringify} = require('flatted/cjs');

var sports = [{cricket: 1}, {football: '2'}];
sports[0].a = sports;
stringify(sports);

console.log(sports);

出力:

フラット化されたパッケージを使用

JSON.stringify() は、有効なオブジェクトを文字列に変換するだけでなく、関数が構成されている場合に値を置き換える可能性のある置換パラメーターも備えています。

let sportsmanObj = {
  name: 'Shiv',
  age: 22,
  gender: 'Male',
};

sportsmanObj.myself = sportsmanObj;

const circularFunc = () => {
  const sited = new WeakSet();
  return (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (sited.has(value)) {
        return;
      }
      sited.add(value);
    }
    return value;
  };
};

JSON.stringify(sportsmanObj, circularFunc());
console.log(sportsmanObj);

実行コード

上記のcircularFuncWeakSetオブジェクトを呼び出しています。これは、弱く保持されたアイテムまたは物事へのポインターを格納するオブジェクトです。

WeakSet 内の各オブジェクトは 1 回しか表示されず、反復または循環データが削除されます。 new キーワードは、新しいオブジェクトを作成するための演算子です。

return ステートメントに if ステートメントをネストしました。 typeof 演算子は、プリミティブ (UndefinedNullBooleanNumberStringFunctionBigIntSymbol) を返すために、最初の if ステートメントで使用されます。 ) 評価中です。

値のタイプがオブジェクトと正確に同等であり、そのオブジェクトの重要度が null でない場合、2 番目の if 条件に進み、値が WeakSet() にあるかどうかを確認します。 JSON.stringify() に元の循環構造と置換メソッドを送信します。

これにより、コンソールに必要な文字列化された結果が得られます。

{
  age: 22,
  gender: "Male",
  myself: [circular object Object],
  name: "Shiv"
}