JavaScript | Converting circular structure to JSON エラーの原因と修正案

2023-01-292023-02-09JavaScript エラー,JavaScript

JavaScriptで発生するコンソールエラー「Converting circular structure to JSON」の原因と対処・修正案について紹介しています。

Uncaught TypeError: Converting circular structure to JSON ～
キャッチされていない型エラー: 循環構造を JSON に変換している

Converting circular structure to JSON エラーの発生原因

「Converting circular structure to JSON」というJavaScriptのエラーはオブジェクトデータの中身が循環参照している構造になっているデータをJSON.stringify()を使ってJSONに変換しようとした際に発生するエラーです。

このエラーはキャッチされていない型エラー（Uncaught TypeError）に分類されています。

例えば、以下のようにオブジェクトのプロパティ内に自身を含めているデータをJSONに変換しようとしているJSコードを実行する場合に、このエラーは発生します。

let data = {}
data.target = data
JSON.stringify(data)

// Uncaught TypeError: Converting circular structure to JSON

これは例えば、上記のケースをJSONデータにすると無限にデータ構造を作られる事になる為のエラーです。

{
	"target":{
		"target":{
			"target":{
				.........
			}
		}
	}
}

Converting circular structure to JSON エラーの修正案

「Converting circular structure to JSON」エラーを修正するには、参照するオブジェクトデータの循環参照構造を解消するか、以下の方法で解決します。

JSON.stringify()にて、循環参照を含むオブジェクトを変換する際に、第二引数に replacer 関数を渡すことで、循環参照を特定の値に置き換えることができます。

let data = {}
data.target = data

const getCircularReplacer = () => {
	const seen = new WeakSet()
	return (key, value) => {
		if (typeof value === "object" && value !== null) {
			if (seen.has(value)) {
				return
			}
			seen.add(value)
		}
		return value
	}
}

let json = JSON.stringify(data, getCircularReplacer())

console.log(json)

他には以下の方法があります。

cycle.js という npm パッケージを使用して、循環参照を含むオブジェクトを変換することができます。

JSON.stringify()に第三引数として、循環参照を解決するためのオプションを渡すことで、循環参照を解決することができるものもある。