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

Shiv Yadav 2023年10月12日
TypeError: 循環構造を JSON に変換しています

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"
}
著者: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

関連記事 - JavaScript Error