javascript エラー「Uncaught TypeError: Converting circular structure to JSON」の解決方法

javascript エラー「Uncaught TypeError: Converting circular structure to JSON」の解決方法

javascriptで、エラー「Uncaught TypeError: Converting circular structure to JSON」が発生した場合の原因と解決方法を記述してます。「JSON.stringify」を使用時に循環した参照になっている場合に発生します。

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 108.0.5359.99

エラー内容

以下の「JSON.stringify」を使用したコードで発生。

let x = {};
let y = {name:'taor',age:20}; 

x.person = y;

console.log(
  JSON.stringify(x) // {"person":{"name":"taor","age":20}}
)

y.person = x;

console.log(
  JSON.stringify(x)
)

エラーメッセージ

Uncaught TypeError: Converting circular structure to JSON

画像

firefox(バージョン107)では、以下のエラーとなります。

Uncaught TypeError: cyclic object value

画像

原因

循環した参照になっているため

解決方法

循環エラーを防ぐ関数を用意して「JSON.stringify」で使用する

let x = {};
let y = {name:'taor',age:20}; 

x.person = y;

console.log(
  JSON.stringify(x) // {"person":{"name":"taor","age":20}}
)

y.person = x;

let arr = []; 

const rep = (key, value) =>{

  if (value != null && typeof value == "object") {
    if (arr.indexOf(value) >= 0)  return;
    arr.push(value);
  }

  return value;

};

console.log(
  JSON.stringify(x, rep)
)

実行結果