JSON.stringify、TypeErrorの回避：循環構造からJSONへの変換
JSONに変換して送信したい大きなオブジェクトがあります。しかしそれは円形の構造をしています。循環参照が存在するものはすべて放棄し、文字列化できるものはすべて送信します。それ、どうやったら出来るの？
ありがとう。
var obj = {
a: "foo",
b: obj
}
Objを次のように文字列化します。
{"a":"foo"}
カスタムの置き換えにJSON.stringifyを使用してください。例えば：
// Demo: Circular reference
var o = {};
o.o = o;
// Note: cache should not be re-used by repeated calls to JSON.stringify.
var cache = [];
JSON.stringify(o, function(key, value) {
if (typeof value === 'object' && value !== null) {
if (cache.indexOf(value) !== -1) {
// Duplicate reference found
try {
// If this value does not reference a parent it can be deduped
return JSON.parse(JSON.stringify(value));
} catch (error) {
// discard key if value cannot be deduped
return;
}
}
// Store value in our collection
cache.Push(value);
}
return value;
});
cache = null; // Enable garbage collection
この例の置き換えは、100％正しいわけではありません（「重複」の定義によって異なります）。次の場合、値は破棄されます。
var a = {b:1}
var o = {};
o.one = a;
o.two = a;
// one and two point to the same object, but two is discarded:
JSON.stringify(o, ...);
しかし、その概念は成り立ちます。カスタムの代替品を使用し、解析されたオブジェクトの値を追跡します。
Node.jsでは、 util.inspect（object） を使用できます。サーキュラーリンクは自動的に "[Circular]"に置き換えられます。
（インストールは不要です） に組み込まれていますが、インポートする必要があります
import * as util from 'util' // has no default export
import { inspect } from 'util' // or directly
// or
var util = require('util')
console.log(util.inspect(myObject))
を調べるためにoptionsオブジェクトを渡すこともできます（上記のリンクを参照）
inspect(myObject[, options: {showHidden, depth, colors, showProxy, ...moreOptions}])
下のコメンターに賞賛を読んであげてください...
なぜ誰も MDNページからの適切な解決策 を投稿していないのだろうか...
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;
};
};
JSON.stringify(circularReference, getCircularReplacer());
表示される値は、配列ではなくセット内に保存する必要があり（置換子はすべての要素でと呼ばれます）、JSON.stringifyを試す必要はありません。循環参照につながるチェーン内の各要素。
受け入れられた答えのように、このソリューションは、循環値だけでなくすべての繰り返し値を削除します。しかし、少なくとも指数関数的な複雑さはありません。
ちょうどする
npm i --save circular-json
その後、あなたのjsファイルに
const JSON = require('circular-json');
...
const json = JSON.stringify(obj);
あなたもできる
const CircularJSON = require('circular-json');
https://github.com/WebReflection/circular-json
注：このパッケージとは関係ありません。しかし、私はこれのためにそれを使います。
私は本当にTrindazの解決策が好きでした - より冗長、しかしそれはいくつかのバグを持っていました。私はそれを好きな人はだれでも修正しました。
さらに、キャッシュオブジェクトに長さ制限を追加しました。
私が印刷しているオブジェクトが本当に大きい場合 - 私は無限に大きいということです - 私は自分のアルゴリズムを制限したいのです。
JSON.stringifyOnce = function(obj, replacer, indent){
var printedObjects = [];
var printedObjectKeys = [];
function printOnceReplacer(key, value){
if ( printedObjects.length > 2000){ // browsers will not print more than 20K, I don't see the point to allow 2K.. algorithm will not be fast anyway if we have too many objects
return 'object too long';
}
var printedObjIndex = false;
printedObjects.forEach(function(obj, index){
if(obj===value){
printedObjIndex = index;
}
});
if ( key == ''){ //root element
printedObjects.Push(obj);
printedObjectKeys.Push("root");
return value;
}
else if(printedObjIndex+"" != "false" && typeof(value)=="object"){
if ( printedObjectKeys[printedObjIndex] == "root"){
return "(pointer to root)";
}else{
return "(see " + ((!!value && !!value.constructor) ? value.constructor.name.toLowerCase() : typeof(value)) + " with key " + printedObjectKeys[printedObjIndex] + ")";
}
}else{
var qualifiedKey = key || "(empty key)";
printedObjects.Push(value);
printedObjectKeys.Push(qualifiedKey);
if(replacer){
return replacer(key, value);
}else{
return value;
}
}
}
return JSON.stringify(obj, printOnceReplacer, indent);
};
Douglas Crockfordによって実装されたJSON.decycleメソッドもあります。彼の cycle.js を参照してください。これにより、ほとんどすべての標準構造を文字列化できます。
var a = [];
a[0] = a;
a[1] = 123;
console.log(JSON.stringify(JSON.decycle(a)));
// result: '[{"$ref":"$"},123]'.
retrocycleメソッドで元のオブジェクトを作り直すこともできます。そのため、それらを文字列化するためにオブジェクトからサイクルを削除する必要はありません。
ただし、これはnotはDOMノードでは有効です（これは実際の使用例におけるサイクルの典型的な原因です）。
var a = [document.body];
console.log(JSON.stringify(JSON.decycle(a)));
私はその問題を解決するためにforkを作りました（my cycle.js fork を見てください）。これはうまくいくはずです。
var a = [document.body];
console.log(JSON.stringify(JSON.decycle(a, true)));
私のフォークではJSON.decycle(variable)は元のように動作し、variableがDOMノード/要素を含んでいると例外を投げます。
JSON.decycle(variable, true)を使用するとき、結果が元に戻せないという事実を受け入れます（retrocycleはDOMノードを再作成しません）。 DOM要素はある程度識別可能であるべきです。例えばdiv要素がidを持つ場合、それは文字列"div#id-of-the-element"に置き換えられます。
@ RobWの答えは正しいですが、これはより高性能です！ハッシュマップ/セットを使用しているからです。
const customStringify = function (v) {
const cache = new Set();
return JSON.stringify(v, function (key, value) {
if (typeof value === 'object' && value !== null) {
if (cache.has(value)) {
// Circular reference found
try {
// If this value does not reference a parent it can be deduped
return JSON.parse(JSON.stringify(value));
}
catch (err) {
// discard key if value cannot be deduped
return;
}
}
// Store value in our set
cache.add(value);
}
return value;
});
};
@ -isaacsから json-stringify-safe をチェックアウトすることをお勧めします。これはNPMで使用されています。
ところで-Node.jsを使用していない場合は、 ソースコードの関連部分 から4〜27行目をコピーして貼り付けるだけです。
インストールする：
$ npm install json-stringify-safe --save
使用するには：
// Require the thing
var stringify = require('json-stringify-safe');
// Take some nasty circular object
var theBigNasty = {
a: "foo",
b: theBigNasty
};
// Then clean it up a little bit
var sanitized = JSON.parse(stringify(theBigNasty));
これにより以下が得られます。
{
a: 'foo',
b: '[Circular]'
}
@Rob Wが言及したVanilla JSON.stringify関数と同様に、
stringify()への2番目の引数として「置換」関数を渡すことで、サニタイズ動作をカスタマイズすることもできます。これを行う方法の簡単な例が必要な場合は、エラー、正規表現、および関数を人間が読み取れる文字列に強制するカスタムの置換プログラム here を作成しました。
あなたがわからないすべての循環参照のキーを知らないときにこの問題の解決策を探している将来のグーグルのために、JSONの周りのラッパーを使用できます。循環参照を除外するstringify関数。 https://Gist.github.com/4653128 のスクリプト例を参照してください。
解決策は、基本的に配列内の以前に印刷されたオブジェクトへの参照を保持し、値を返す前に置換関数でそれをチェックすることです。また、循環参照を除外するだけでなく、オブジェクトを2回印刷することを排除するため、循環参照を除外するよりも厳密です。
ラッパーの例：
function stringifyOnce(obj, replacer, indent){
var printedObjects = [];
var printedObjectKeys = [];
function printOnceReplacer(key, value){
var printedObjIndex = false;
printedObjects.forEach(function(obj, index){
if(obj===value){
printedObjIndex = index;
}
});
if(printedObjIndex && typeof(value)=="object"){
return "(see " + value.constructor.name.toLowerCase() + " with key " + printedObjectKeys[printedObjIndex] + ")";
}else{
var qualifiedKey = key || "(empty key)";
printedObjects.Push(value);
printedObjectKeys.Push(qualifiedKey);
if(replacer){
return replacer(key, value);
}else{
return value;
}
}
}
return JSON.stringify(obj, printOnceReplacer, indent);
}
var a={b:"b"};
a.a=a;
JSON.stringify(preventCircularJson(a));
に評価されます。
"{"b":"b","a":"CIRCULAR_REFERENCE_REMOVED"}"
機能付き：
/**
* Traverses a javascript object, and deletes all circular values
* @param source object to remove circular references from
* @param censoredMessage optional: what to put instead of censored values
* @param censorTheseItems should be kept null, used in recursion
* @returns {undefined}
*/
function preventCircularJson(source, censoredMessage, censorTheseItems) {
//init recursive value if this is the first call
censorTheseItems = censorTheseItems || [source];
//default if none is specified
censoredMessage = censoredMessage || "CIRCULAR_REFERENCE_REMOVED";
//values that have allready apeared will be placed here:
var recursiveItems = {};
//initaite a censored clone to return back
var ret = {};
//traverse the object:
for (var key in source) {
var value = source[key]
if (typeof value == "object") {
//re-examine all complex children again later:
recursiveItems[key] = value;
} else {
//simple values copied as is
ret[key] = value;
}
}
//create list of values to censor:
var censorChildItems = [];
for (var key in recursiveItems) {
var value = source[key];
//all complex child objects should not apear again in children:
censorChildItems.Push(value);
}
//censor all circular values
for (var key in recursiveItems) {
var value = source[key];
var censored = false;
censorTheseItems.forEach(function (item) {
if (item === value) {
censored = true;
}
});
if (censored) {
//change circular values to this
value = censoredMessage;
} else {
//recursion:
value = preventCircularJson(value, censoredMessage, censorChildItems.concat(censorTheseItems));
}
ret[key] = value
}
return ret;
}
代わりにJSON.stringifyメソッドを使用してください。詳しくはこの文書を読んでください。 http://msdn.Microsoft.com/ja-jp/library/cc836459%28v=vs.94%29.aspx
var obj = {
a: "foo",
b: obj
}
var replacement = {"b":undefined};
alert(JSON.stringify(obj,replacement));
巡回参照を置換配列に追加する方法を考え出します。 typeofメソッドを使用して、プロパティが 'object'型であるかどうかを調べ（参照）、循環参照を検証するために完全等価検査（===）を使用できます。
これは古い質問ですが、私が作成した smart-circular というNPMパッケージを提案したいのですが、これは他の方法とは異なる動作をします。 大きくて深いオブジェクト を使用している場合は、特に便利です。
いくつかの機能は以下のとおりです。
オブジェクト内の循環参照または単純に繰り返された構造を、その最初の出現に至るパスで置き換えます（ [circular] だけではありません）。
幅優先探索で循環性を探すことによって、パッケージはこのパスができるだけ小さくなることを保証します。これは非常に大きくて深いオブジェクトを扱うときに重要です。 JSON.stringifyはDFSを行います。
パーソナライズされた置換を可能にし、オブジェクトの重要性の低い部分を単純化したり無視したりするのに便利です。
最後に、パスは参照されているフィールドにアクセスするのに必要な方法で正確に記述されているので、デバッグに役立ちます。
JSON.stringify（）alsoへの2番目の引数を使用すると、データ内で検出されるすべてのオブジェクトから保持する必要があるキー名の配列を指定できます。溶液。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
var obj = {
a: "foo",
b: this
}
var json = JSON.stringify(obj, ['a']);
console.log(json);
// {"a":"foo"}
注： 奇妙なことに、OPのオブジェクト定義は最新のChromeやFirefoxでは循環参照エラーをスローしません。この回答の定義は、didがエラーをスローするように）修正されました。
私はこのようにこの問題を解決します：
var util = require('util');
// Our circular object
var obj = {foo: {bar: null}, a:{a:{a:{a:{a:{a:{a:{hi: 'Yo!'}}}}}}}};
obj.foo.bar = obj;
// Generate almost valid JS object definition code (typeof string)
var str = util.inspect(b, {depth: null});
// Fix code to the valid state (in this example it is not required, but my object was huge and complex, and I needed this for my case)
str = str
.replace(/<Buffer[ \w\.]+>/ig, '"buffer"')
.replace(/\[Function]/ig, 'function(){}')
.replace(/\[Circular]/ig, '"Circular"')
.replace(/\{ \[Function: ([\w]+)]/ig, '{ $1: function $1 () {},')
.replace(/\[Function: ([\w]+)]/ig, 'function $1(){}')
.replace(/(\w+): ([\w :]+GMT\+[\w \(\)]+),/ig, '$1: new Date("$2"),')
.replace(/(\S+): ,/ig, '$1: null,');
// Create function to eval stringifyed code
var foo = new Function('return ' + str + ';');
// And have fun
console.log(JSON.stringify(foo(), null, 4));
私は github上にcircular-jsonライブラリを見つけました そしてそれは私の問題に対してうまくいきました。
私が便利だと思ういくつかの良い機能：
- マルチプラットフォームでの使用をサポートしていますが、これまでのところnode.jsでしかテストしていません。
- APIは同じなので、あなたがする必要があるのはJSONの代わりとしてそれを含めて使うことだけです。
- 独自の解析方法があるため、 '循環'シリアル化データをオブジェクトに戻すことができます。
他の答えに基づいて、私は次のコードになります。これは循環参照、カスタムコンストラクタを持つオブジェクトでは非常にうまく機能します。
直列化される与えられたオブジェクトから、
- オブジェクトをトラバースしている間に遭遇したすべてのオブジェクトをキャッシュし、それぞれに一意のhashIDを割り当てます（自動インクリメント番号も機能します）。
- 循環参照が見つかったら、新しいオブジェクト内のそのフィールドを循環としてマークし、元のオブジェクトのハッシュIDを属性として格納します。
Github Link - DecycledJSON
DJSHelper = {};
DJSHelper.Cache = [];
DJSHelper.currentHashID = 0;
DJSHelper.ReviveCache = [];
// DOES NOT SERIALIZE FUNCTION
function DJSNode(name, object, isRoot){
this.name = name;
// [ATTRIBUTES] contains the primitive fields of the Node
this.attributes = {};
// [CHILDREN] contains the Object/Typed fields of the Node
// All [CHILDREN] must be of type [DJSNode]
this.children = []; //Array of DJSNodes only
// If [IS-ROOT] is true reset the Cache and currentHashId
// before encoding
isRoot = typeof isRoot === 'undefined'? true:isRoot;
this.isRoot = isRoot;
if(isRoot){
DJSHelper.Cache = [];
DJSHelper.currentHashID = 0;
// CACHE THE ROOT
object.hashID = DJSHelper.currentHashID++;
DJSHelper.Cache.Push(object);
}
for(var a in object){
if(object.hasOwnProperty(a)){
var val = object[a];
if (typeof val === 'object') {
// IF OBJECT OR NULL REF.
/***************************************************************************/
// DO NOT REMOVE THE [FALSE] AS THAT WOULD RESET THE [DJSHELPER.CACHE]
// AND THE RESULT WOULD BE STACK OVERFLOW
/***************************************************************************/
if(val !== null) {
if (DJSHelper.Cache.indexOf(val) === -1) {
// VAL NOT IN CACHE
// ADD THE VAL TO CACHE FIRST -> BEFORE DOING RECURSION
val.hashID = DJSHelper.currentHashID++;
//console.log("Assigned", val.hashID, "to", a);
DJSHelper.Cache.Push(val);
if (!(val instanceof Array)) {
// VAL NOT AN [ARRAY]
try {
this.children.Push(new DJSNode(a, val, false));
} catch (err) {
console.log(err.message, a);
throw err;
}
} else {
// VAL IS AN [ARRAY]
var node = new DJSNode(a, {
array: true,
hashID: val.hashID // HashID of array
}, false);
val.forEach(function (elem, index) {
node.children.Push(new DJSNode("elem", {val: elem}, false));
});
this.children.Push(node);
}
} else {
// VAL IN CACHE
// ADD A CYCLIC NODE WITH HASH-ID
this.children.Push(new DJSNode(a, {
cyclic: true,
hashID: val.hashID
}, false));
}
}else{
// PUT NULL AS AN ATTRIBUTE
this.attributes[a] = 'null';
}
} else if (typeof val !== 'function') {
// MUST BE A PRIMITIVE
// ADD IT AS AN ATTRIBUTE
this.attributes[a] = val;
}
}
}
if(isRoot){
DJSHelper.Cache = null;
}
this.constructorName = object.constructor.name;
}
DJSNode.Revive = function (xmlNode, isRoot) {
// Default value of [isRoot] is True
isRoot = typeof isRoot === 'undefined'?true: isRoot;
var root;
if(isRoot){
DJSHelper.ReviveCache = []; //Garbage Collect
}
if(window[xmlNode.constructorName].toString().indexOf('[native code]') > -1 ) {
// yep, native in the browser
if(xmlNode.constructorName == 'Object'){
root = {};
}else{
return null;
}
}else {
eval('root = new ' + xmlNode.constructorName + "()");
}
//CACHE ROOT INTO REVIVE-CACHE
DJSHelper.ReviveCache[xmlNode.attributes.hashID] = root;
for(var k in xmlNode.attributes){
// PRIMITIVE OR NULL REF FIELDS
if(xmlNode.attributes.hasOwnProperty(k)) {
var a = xmlNode.attributes[k];
if(a == 'null'){
root[k] = null;
}else {
root[k] = a;
}
}
}
xmlNode.children.forEach(function (value) {
// Each children is an [DJSNode]
// [Array]s are stored as [DJSNode] with an positive Array attribute
// So is value
if(value.attributes.array){
// ITS AN [ARRAY]
root[value.name] = [];
value.children.forEach(function (elem) {
root[value.name].Push(elem.attributes.val);
});
//console.log("Caching", value.attributes.hashID);
DJSHelper.ReviveCache[value.attributes.hashID] = root[value.name];
}else if(!value.attributes.cyclic){
// ITS AN [OBJECT]
root[value.name] = DJSNode.Revive(value, false);
//console.log("Caching", value.attributes.hashID);
DJSHelper.ReviveCache[value.attributes.hashID] = root[value.name];
}
});
// [SEPARATE ITERATION] TO MAKE SURE ALL POSSIBLE
// [CYCLIC] REFERENCES ARE CACHED PROPERLY
xmlNode.children.forEach(function (value) {
// Each children is an [DJSNode]
// [Array]s are stored as [DJSNode] with an positive Array attribute
// So is value
if(value.attributes.cyclic){
// ITS AND [CYCLIC] REFERENCE
root[value.name] = DJSHelper.ReviveCache[value.attributes.hashID];
}
});
if(isRoot){
DJSHelper.ReviveCache = null; //Garbage Collect
}
return root;
};
DecycledJSON = {};
DecycledJSON.stringify = function (obj) {
return JSON.stringify(new DJSNode("root", obj));
};
DecycledJSON.parse = function (json, replacerObject) {
// use the replacerObject to get the null values
return DJSNode.Revive(JSON.parse(json));
};
DJS = DecycledJSON;
使用例1：
var obj = {
id:201,
box: {
owner: null,
key: 'storm'
},
lines:[
'item1',
23
]
};
console.log(obj); // ORIGINAL
// SERIALIZE AND THEN PARSE
var jsonObj = DJS.stringify(obj);
console.log(DJS.parse(jsonObj));
使用例2：
// PERSON OBJECT
function Person() {
this.name = null;
this.child = null;
this.dad = null;
this.mom = null;
}
var Dad = new Person();
Dad.name = 'John';
var Mom = new Person();
Mom.name = 'Sarah';
var Child = new Person();
Child.name = 'Kiddo';
Dad.child = Mom.child = Child;
Child.dad = Dad;
Child.mom = Mom;
console.log(Child); // ORIGINAL
// SERIALIZE AND THEN PARSE
var jsonChild = DJS.stringify(Child);
console.log(DJS.parse(jsonChild));
この種のオブジェクトに関するこの問題を解決するための他の解決策は、このライブラリを使用することです。
https://github.com/ericmuyser/stringy
それは簡単で、あなたはいくつかの簡単なステップでこれを解決することができます。
これは十分に回答されていますが、delete演算子を使用して文字列化の前に問題のプロパティを明示的に削除することもできます。
delete obj.b;
const jsonObject = JSON.stringify(obj);
これにより、循環参照を削除するための複雑なロジックを構築または維持する必要がなくなります。
JSONの動作をオーバーライドするという答えを更新するには（おそらくお勧めしませんが、非常に簡単です）、circular-json（非推奨）を使用しないでください。代わりに、フラット化された後続を使用します。
https://www.npmjs.com/package/flatted
@ user1541685の上記の古い回答から借用しましたが、新しいものに置き換えられました。
npm i --save flatted
あなたのjsファイルで
const JSON = require('flatted');
...
const json = JSON.stringify(obj);
あなたもできる
const CircularJSON = require('flatted');
function myStringify(obj, maxDeepLevel = 2) {
if (obj === null) {
return 'null';
}
if (obj === undefined) {
return 'undefined';
}
if (maxDeepLevel < 0 || typeof obj !== 'object') {
return obj.toString();
}
return Object
.entries(obj)
.map(x => x[0] + ': ' + myStringify(x[1], maxDeepLevel - 1))
.join('\r\n');
}
私はこの質問が古く、多くの素晴らしい答えを持っていることを知っていますが、それは新しいフレーバーのために私はこの答えを投稿します （es5 +）
Object.defineProperties(JSON, {
refStringify: {
value: function(obj) {
let objMap = new Map();
let stringified = JSON.stringify(obj,
function(key, value) {
// only for objects
if (typeof value == 'object') {
// If has the value then return a reference to it
if (objMap.has(value))
return objMap.get(value);
objMap.set(value, `ref${objMap.size + 1}`);
}
return value;
});
return stringified;
}
},
refParse: {
value: function(str) {
let parsed = JSON.parse(str);
let objMap = _createObjectMap(parsed);
objMap.forEach((value, key) => _replaceKeyWithObject(value, key));
return parsed;
}
},
});
// *************************** Example
let a = {
b: 32,
c: {
get a() {
return a;
},
get c() {
return a.c;
}
}
};
let stringified = JSON.refStringify(a);
let parsed = JSON.refParse(stringified, 2);
console.log(parsed, JSON.refStringify(parsed));
// *************************** /Example
// *************************** Helper
function _createObjectMap(obj) {
let objMap = new Map();
JSON.stringify(obj, (key, value) => {
if (typeof value == 'object') {
if (objMap.has(value))
return objMap.get(value);
objMap.set(value, `ref${objMap.size + 1}`);
}
return value;
});
return objMap;
}
function _replaceKeyWithObject(key, obj, replaceWithObject = obj) {
Object.keys(obj).forEach(k => {
let val = obj[k];
if (val == key)
return (obj[k] = replaceWithObject);
if (typeof val == 'object' && val != replaceWithObject)
_replaceKeyWithObject(key, val, replaceWithObject);
});
}もし
console.log(JSON.stringify(object));
aになります
TypeError：周期オブジェクト値
それからあなたはこのように印刷したいかもしれません：
var output = '';
for (property in object) {
output += property + ': ' + object[property]+'; ';
}
console.log(output);
これを試して：
var obj = {
a: "foo",
b: obj
};
var circular_replacer = (value) => {
var seen = [];
if (value != null && typeof value == "object") {
if (seen.indexOf(value) >= 0) return;
seen.Push(value);
}
return value;
};
obj = circular_replacer(obj);