環状構造をJSONのような形式で印刷するにはどうすればよいですか?


680

JSONに変換して送信したい大きなオブジェクトがあります。ただし、円形構造です。存在する循環参照をすべて投げ捨て、文字列化できるものは何でも送信したい。それ、どうやったら出来るの?

ありがとう。

var obj = {
  a: "foo",
  b: obj
}

私はobjを文字列化したい:

{"a":"foo"}

5
解析したい循環参照を持つサンプルオブジェクトを投稿していただけませんか?
TWickz

3
このような何か?
Alvin Wong


2
パーティーには遅れましたが、これを処理するgithubプロジェクトがあります。
プレストンS

回答:


605

JSON.stringifyカスタムの代替品と一緒に使用します。例えば:

// Demo: Circular reference
var circ = {};
circ.circ = circ;

// Note: cache should not be re-used by repeated calls to JSON.stringify.
var cache = [];
JSON.stringify(circ, (key, value) => {
  if (typeof value === 'object' && value !== null) {
    // Duplicate reference found, discard key
    if (cache.includes(value)) 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, ...);

しかし、その概念はそのままです。カスタム置換を使用し、解析されたオブジェクト値を追跡します。

es6で記述されたユーティリティ関数として:

// safely handles circular references
JSON.safeStringify = (obj, indent = 2) => {
  let cache = [];
  const retVal = JSON.stringify(
    obj,
    (key, value) =>
      typeof value === "object" && value !== null
        ? cache.includes(value)
          ? undefined // Duplicate reference found, discard key
          : cache.push(value) && value // Store value in our collection
        : value,
    indent
  );
  cache = null;
  return retVal;
};

// Example:
console.log('options', JSON.safeStringify(options))

1
@ハリーバグは何ですか?間違いがあった場合は、喜んで回答を修正します。
Rob W

1
@CruzDiablo DOMのシリアライズは通常無意味です。ただし、目的に合った意味のあるシリアル化メソッドを考えることができる場合は、DOMオブジェクトにカスタムのシリアル化メソッドを追加してみてくださいNode.prototype.toJSON = function() { return 'whatever you think that is right'; };(より一般的な/特定のものが必要な場合は、プロトタイプツリーで何でも試してください:HTMLDivElement implements HTMLElement implements ElementはNodeを実装し、EventTargetを実装します。注:これはブラウザに依存する場合があり、前のツリーはChromeに当てはまります)
Rob W

7
これは間違っています。これは、実際に周期的な構造でなくても、2回含まれるオブジェクトの2番目の外観をスキップするためです。var a={id:1}; JSON.stringify([a,a]);
user2451227 14

3
@ user2451227「この例の置換は100%正しくありません(「複製」の定義によって異なります)。しかし、概念はそのままです:カスタムの置換を使用し、解析されたオブジェクト値を追跡します。」
Rob W

4
ここでのGCの問題は間違いなく冗長です。これを単一のスクリプトとして実行すると、スクリプトはすぐに終了します。これは、実装のための関数の内部に封入されている場合、cache到達不能になりますdeveloper.mozilla.org/en-US/docs/Web/JavaScript/...
Trindaz

704

Node.jsでは、util.inspect(object)を使用できます。自動的に循環リンクを「[循環]」に置き換えます。


組み込み(インストールは不要)であっても、インポートする必要があります

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))

また、オプションオブジェクトを渡して検査できることにも注意してください(上記のリンクを参照)

inspect(myObject[, options: {showHidden, depth, colors, showProxy, ...moreOptions}])



読んで、以下のコメント投稿者に称賛を送ってください...


134
utilは組み込みモジュールなので、インストールする必要はありません。
Mitar

10
console.log(util.inspect(obj))
starsinmypockets 2014年

19
@Mitarは組み込みですが、それでもモジュールをロードする必要がありますvar util = require('util');
bodecker

14
<s> </ s> ではなく obj_str = util.inspect(thing)、私のように馬鹿にならないでくださいgarbage_str = JSON.stringify(util.inspect(thing))
ThorSummoner

7
これは、型のチェックをいじくるよりもはるかに優れています。文字列化がこのように機能しないのはなぜですか?循環参照があることがわかっている場合、なぜそれを無視するように指示できないのですか?
Chris Peacock

141

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 各要素を試す必要はありません。

受け入れられた回答と同様に、このソリューションは循環だけでなく、すべての繰り返し値を削除ます。しかし、少なくとも指数関数的な複雑さはありません。


端正ですが、これはES2015のみです。IEサポートなし。
Martin Capodici

43
依田氏は、「IEがまだサポートされている場合は、トランスパイラーを使用する必要があります」と述べています。
スペイン列車

1
replacer = () => { const seen = new WeakSet(); return (key, value) => { if (typeof value === "object" && value !== null) { if (seen.has(value)) { return; } seen.add(value); } return value; }; } () => { const seen = new WeakSet(); return (key, value) => { if (typeof value === "object" && value !== null) { if (seen.has(value)) { return; } seen.add(value); … JSON.stringify({a:1, b: '2'}, replacer)undefinedクロームで戻ります
ロベルト・トマス

1
React + Typescriptで動作します。ありがとう
user3417479

76

ただやる

npm i --save circular-json

次にあなたのjsファイルに

const CircularJSON = require('circular-json');
...
const json = CircularJSON.stringify(obj);

https://github.com/WebReflection/circular-json

注:私はこのパッケージとは何の関係もありません。しかし、私はこのためにそれを使用します。

アップデート2020

CircularJSONはメンテナンスのみであり、flattedは後継です。


どうもありがとう!素晴らしいライブラリ、時間の節約になりました。超小型(わずか1.4KBに縮小)。
ブライアンハーク2017

16
モジュールを使用するためには、「ただ行う」よりも正当化する必要があるかもしれません。そしてJSON、原則として上書きするのは良くありません。
エドウィン

スタブテストに使用するオブジェクトをコピーする必要がありました。この答えは完璧でした。オブジェクトをコピーして、オーバーライドを削除しました。ありがとう!!
Chris Sharp

1
著者によると、このパッケージは廃止されています。CircularJSONはメンテナンスのみで、flattedは後継です。リンク:github.com/WebReflection/flatted#flatted
Robert Molina

3
「フラット化された」(および循環json?)パッケージはJSON.stringify()機能を複製しないことに注意してください。独自の非JSON形式を作成します。(例:のFlatted.stringify({blah: 1})結果[{"blah":1}])誰かがこれについて問題を提起しようとしたのを私は見ます、そして、著者は彼らを怒らせ、問題をコメントにロックしました。
jameslol

48

私は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);
};

この行にnullチェックがありません:return "(see" +(!! value.constructor?value.constructor.name.toLowerCase():typeof(value))+ "with key" + PrintedObjectKeys [printedObjIndex] + ")";
Isak 2013

喜んで追加します。これまでに問題が発生したため、null許容値を教えてください。
モグラビ男2013

2
//ブラウザは20Kを超えて印刷しません-しかし、2Kとして制限をかけます。多分将来のために変わる?
Pochen

38

@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;
  });
};

循環参照を持つ深くネストされたオブジェクトについては、stringifyDeep
Alexander Mills

Set実装が内部で配列とindexOfを使用しているだけかもしれませんが、私はそれを確認していません。
Alexander Mills

これは、異なる値でも子ノードを持つ親ノードを削除します-たとえば- {"a":{"b":{"a":"d"}}}空のオブジェクト{}を持つノードも削除します
Sandip

そのSandipの例を示すことができますか?gist.github.comなどを作成する
Alexander Mills

優秀な !!!最初(上から、ただし2-3の関数ソリューションのみをチェック)ここでnode.jsとFissionの下で動作するソリューション;-)-ライブラリがハングアップしました。
トム

37

JSON.decycleDouglas Crockfordによって実装されたメソッドもあることに注意してください。彼のcycle.jsを見て ください。これにより、ほぼすべての標準構造を文字列化できます。

var a = [];
a[0] = a;
a[1] = 123;
console.log(JSON.stringify(JSON.decycle(a)));
// result: '[{"$ref":"$"},123]'.

retrocycleメソッドを使用して元のオブジェクトを再作成することもできます。したがって、オブジェクトからサイクルを削除してそれらを文字列化する必要はありません。

ただし、これはDOMノード(実際のユースケースにおける循環の一般的な原因です)では機能しません。たとえば、これはスローされます:

var a = [document.body];
console.log(JSON.stringify(JSON.decycle(a)));

その問題を解決するためにフォークを作りました(cycle.jsフォークを参照してください)。これはうまくいくはずです:

var a = [document.body];
console.log(JSON.stringify(JSON.decycle(a, true)));

私のフォークJSON.decycle(variable)では元のように動作し、variableDOMノード/要素が含まれていると例外がスローされることに注意してください。

使用JSON.decycle(variable, true)すると、結果が元に戻せないという事実を受け入れます(レトロサイクルはDOMノードを再作成しません)。ただし、DOM要素はある程度識別可能でなければなりません。たとえば、div要素にIDがある場合、それは文字列に置き換えられます"div#id-of-the-element"


2
彼のコードとあなたのコードの両方を使用すると、「RangeError:最大コールスタックサイズを超えました」と表示されます。
jcollum 2014

Fiddleでコードを提供したり、Githubで問題を追加したりする場合は、こちらをご覧ください
Nux

これは私が探していたものです。JSON.decycle(a, true)decycle関数のパラメーターとしてtrueを渡すとどうなりますか。
Rudra

@Rudra trueはstringifyNodes、フォークでオプションをtrueにします。これは、たとえばdivid = "some-id"を文字列にダンプしますdiv#some-id。いくつかの問題は回避できますが、完全にレトロサイクルすることはできません。
木の実

npmパッケージnpmjs.com/package/json-jsがありますが、しばらく更新されませんでした
Michael Freidgeim

23

@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が言及したバニラJSON.stringify関数と同様に、「replacer」関数をの2番目の引数として渡すことで、サニタイズ動作をカスタマイズすることもできますstringify()。これを行う簡単な例が必要な場合は、エラー、正規表現、および関数を人間が読める文字列に変換するカスタムの置き換えをここに記述しました


13

すべての循環参照のキーがわからない場合に、この問題の解決策を探す将来のGoogle社員は、JSON.stringify関数のラッパーを使用して循環参照を除外できます。https://gist.github.com/4653128でスクリプトの例を参照してください

解決策は基本的に、以前に出力されたオブジェクトへの参照を配列に保持し、値を返す前にそれを置換関数でチェックすることです。これは、循環参照を除外するだけではなく、オブジェクトを2度印刷することも禁じられています。その副作用の1つは循環参照を回避することです。

ラッパーの例:

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);
}

3
素敵なコード。ただし、ばかげたエラーがあります。明示的に別段の指定がない限り、翻訳することもできるので、if(printedObjIndex)書くべきですが、書く必要があります。if(printedObjIndex==false)index0false
モグラビ男13

1
@guymograbi意味===ですか?0 == falseですtrue0 === falseですfalse。; ^)しかし、私はprintedObjIndexfalseに初期化しない方がundefinedいいです。そうすれば、(よく、Trindazの)メタファーを奇妙に混ぜないようにチェックできるからです。
ruffin 2015

@ルフィンいいキャッチ。はい、明らかに、このような愚かな間違いを見つけるために、常にハードな平等とjshintを使用してください。
モグラビ

4

JSON.stringifyメソッドを置換して使用します。詳細については、このドキュメントをお読みください。http://msdn.microsoft.com/en-us/library/cc836459%28v=vs.94%29.aspx

var obj = {
  a: "foo",
  b: obj
}

var replacement = {"b":undefined};

alert(JSON.stringify(obj,replacement));

循環参照で置換配列を作成する方法を理解します。typeofメソッドを使用して、プロパティのタイプが「オブジェクト」(reference)であるかどうかを確認し、正確な等価チェック(===)を使用して循環参照を確認できます。


4
これはIEでのみ機能する可能性があります(MSDNがMicrosoftのドキュメントであり、MicrosoftがIEを作成しているという事実を考慮してください)。Firefox / Chromeでは、jsfiddle.net / ppmaWが循環参照エラーを生成します。参考:循環参照を作成var obj = {foo:obj}しませ。代わりに、foo属性が以前の値を参照するオブジェクトを作成しますobjundefined以前に定義されていない場合は、のために宣言されvar objます)。
Rob W

4

もし

console.log(JSON.stringify(object));

結果は

TypeError:循環オブジェクト値

次に、次のように印刷します。

var output = '';
for (property in object) {
  output += property + ': ' + object[property]+'; ';
}
console.log(output);

21
多分それは1つのレベルしか印刷しないからでしょうか?
Alex Turpin

非常に簡単です。Chromeの箱から出してすぐに機能するので、これに賛成しました。EXCELLENT
愛と平和-ジョーコードスウェル2018

4
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;
}

3

私はこれが古い質問であることを知っていますが、私が作成したsmart-circularと呼ばれるNPMパッケージを提案したいと思います。大きくて深いオブジェクトを使用している場合に特に便利です

いくつかの機能は次のとおりです。

  • オブジェクト内の循環参照または単純に繰り返される構造を、最初の出現に至るパス(文字列[circular]だけでなく)に置き換える。

  • 幅優先検索で循環を探すことにより、パッケージはこのパスが可能な限り小さいことを保証します。これは、非常に大きくて深いオブジェクトを処理するときに重要です。 JSON.stringifyはDFSを実行します);

  • オブジェクトの重要性の低い部分を簡略化または無視するのに便利な、パーソナライズされた置換を許可します。

  • 最後に、パスは参照されるフィールドにアクセスするために必要な方法で正確に記述されているため、デバッグに役立ちます。


3

JSON.stringify()の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では循環参照エラーをスローしません。それはように、この答えで定義が変更されたなかったエラーを投げます。



これは受け入れられるべき答えです
躁うつ病

2

JSONの動作方法をオーバーライドすることの回答を更新するには(おそらく推奨されませんが、非常に単純です)、使用しないでくださいcircular-json(非推奨です)。代わりに、フラット化された後続を使用します。

https://www.npmjs.com/package/flatted

上記の古い回答から@ user1541685から借用しましたが、新しい回答に置き換えました。

npm i --save flatted

次にあなたのjsファイルに

const CircularJSON = require('flatted');
const json = CircularJSON.stringify(obj);

1

はgithubで循環jsonライブラリを見つけましたが、それは私の問題にうまく機能しました。

私が便利だと思ったいくつかの優れた機能:

  • マルチプラットフォームの使用をサポートしていますが、これまではnode.jsでのみテストしました。
  • APIは同じなので、JSONの代替としてインクルードして使用するだけです。
  • これには独自の解析メソッドがあるため、「循環」シリアル化データをオブジェクトに変換して戻すことができます。

2
このライブラリでエラーが発生したため、別のライブラリを探す必要があります。エラーTypeError:toISOStringは、Object。<anonymous>(localhost:8100 / build / polyfills.js:1:3458)のString.toJSON(<anonymous>)の関数ではありません。Object。のJSON.stringify(<anonymous>)の関数ですstringifyRecursion [stringifyとして](localhost:8100 / build / main.js:258450:15
Mark Ellul

1
@MarkEllul私は2015年にコメントを書きました。より良い代替案が見つかれば、編集してここに投稿します。私はまだ同じ問題を毎日の仕事で時々終わらせることがあり、通常は適切な/安全な検査で再帰的に自分の手動機能を好む。慣れていない場合は、関数型プログラミングの手法をチェックすることをお勧めします。通常、この種の再帰的な操作は、それほど難しくなく、信頼性が高いため、楽になります。
JacopKane

また、イベントを文字列化してサイプレステストで再送信しようとすると、「toISOStringは関数ではありません」を取得
Devin G Rhode

1

私はこの問題を次のように解決します:

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));

これはかなりうまく_class: ClassName { data: "here" }いきましたが、クラスがのように表現されていたようですので、次のルールを追加しました.replace(/(\w+) {/g, '{ __ClassName__: "$1", ')。私の場合、httpリクエストオブジェクトがどのように見えるかを確認しようとしていました。
redbmk 2016年

1

私はこの質問が古くてたくさんの素晴らしい答えがあることを知っていますが、新しい味(es5 +)のためこの答えを投稿します


1

これは十分に回答されていますが、delete演算子を使用して文字列化する前に、問題のプロパティを明示的に削除することもできます。

delete obj.b; 
const jsonObject = JSON.stringify(obj);

演算子を削除する

これにより、循環参照を削除するために複雑なロジックを構築または維持する必要がなくなります。


1
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');
}


0

他の回答に基づいて、私は次のコードになります。これは、循環参照、カスタムコンストラクターを持つオブジェクトで非常にうまく機能します。

シリアル化される指定されたオブジェクトから、

  • オブジェクトのトラバース中に遭遇するすべてのオブジェクトをキャッシュし、それぞれに一意のハッシュIDを割り当てます(自動インクリメントの番号も機能します)
  • 循環参照が見つかったら、新しいオブジェクトのそのフィールドを循環としてマークし、元のオブジェクトのハッシュIDを属性として保存します。

Githubのリンク - 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));

0

これを試して:

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);

seen.push(value)= -Dの後に数行のコードを追加する必要はありませんか?ライクfor (var key in value) {value[key] = circular_replacer(value[key]);}
クレサン

コードのみの回答はお勧めしません。編集をクリックして、コードが質問にどのように対処するかを要約するいくつかの単語を追加するか、おそらくあなたの回答が以前の回答とどのように異なるかを説明してください。口コミから
Nick

0

私の解決策では、サイクルに遭遇した場合、単に「サイクル」とは表示されません(または何も表示されません)。fooのようなものを表示します。上記のオブジェクト#42を参照してください。オブジェクト#42の場合(各オブジェクトは、開始時に、整数xxxの付いたオブジェクト#xxxと言います)

スニペット:

(function(){
	"use strict";
	var ignore = [Boolean, Date, Number, RegExp, String];
	function primitive(item){
		if (typeof item === 'object'){
			if (item === null) { return true; }
			for (var i=0; i<ignore.length; i++){
				if (item instanceof ignore[i]) { return true; }
			}
			return false;
		} else {
			return true;
		}
	}
	function infant(value){
		return Array.isArray(value) ? [] : {};
	}
	JSON.decycleIntoForest = function decycleIntoForest(object, replacer) {
		if (typeof replacer !== 'function'){
			replacer = function(x){ return x; }
		}
		object = replacer(object);
		if (primitive(object)) return object;
		var objects = [object];
		var forest  = [infant(object)];
		var bucket  = new WeakMap(); // bucket = inverse of objects 
		bucket.set(object, 0);       // i.e., map object to index in array
		function addToBucket(obj){
			var result = objects.length;
			objects.push(obj);
			bucket.set(obj, result);
			return result;
		}
		function isInBucket(obj){
			return bucket.has(obj);
			// objects[bucket.get(obj)] === obj, iff true is returned
		}
		function processNode(source, target){
			Object.keys(source).forEach(function(key){
				var value = replacer(source[key]);
				if (primitive(value)){
					target[key] = {value: value};
				} else {
					var ptr;
					if (isInBucket(value)){
						ptr = bucket.get(value);
					} else {
						ptr = addToBucket(value);
						var newTree = infant(value);
						forest.push(newTree);
						processNode(value, newTree);
					}
					target[key] = {pointer: ptr};
				}
			});
		}
		processNode(object, forest[0]);
		return forest;
	};
})();
the = document.getElementById('the');
function consoleLog(toBeLogged){
  the.textContent = the.textContent + '\n' + toBeLogged;
}
function show(root){
	var cycleFree = JSON.decycleIntoForest(root);
	var shown = cycleFree.map(function(tree, idx){ return false; });
	var indentIncrement = 4;
	function showItem(nodeSlot, indent, label){
	  leadingSpaces = ' '.repeat(indent);
      leadingSpacesPlus = ' '.repeat(indent + indentIncrement);
	  if (shown[nodeSlot]){
	  consoleLog(leadingSpaces + label + ' ... see above (object #' + nodeSlot + ')');
        } else {
		  consoleLog(leadingSpaces + label + ' object#' + nodeSlot);
		  var tree = cycleFree[nodeSlot];
		  shown[nodeSlot] = true;
		  Object.keys(tree).forEach(function(key){
			var entry = tree[key];
			if ('value' in entry){
			  consoleLog(leadingSpacesPlus + key + ": " + entry.value);
                } else {
					if ('pointer' in entry){
						showItem(entry.pointer, indent+indentIncrement, key);
                    }
                }
			});
        }
    }
	showItem(0, 0, 'root');
}
cities4d = {
	Europe:{
		north:[
			{name:"Stockholm", population:1000000, temp:6},
			{name:"Helsinki", population:650000, temp:7.6}
		],
		south:[
			{name:"Madrid", population:3200000, temp:15},
			{name:"Rome", population:4300000, temp:15}
		]
	},
	America:{
		north:[
			{name:"San Francisco", population:900000, temp:14},
			{name:"Quebec", population:530000, temp:4}
		],
		south:[
			{name:"Rio de Janeiro", population:7500000, temp:24},
			{name:"Santiago", population:6300000, temp:14}
		]
	},
	Asia:{
		north:[
			{name:"Moscow", population:13200000, temp:6}
		]
	}
};
cities4d.Europe.north[0].alsoStartsWithS = cities4d.America.north[0];
cities4d.Europe.north[0].smaller = cities4d.Europe.north[1];
cities4d.Europe.south[1].sameLanguage = cities4d.America.south[1];
cities4d.Asia.ptrToRoot = cities4d;
show(cities4d)
<pre id="the"></pre>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.