ฉันจะพิมพ์โครงสร้างแบบวงกลมในรูปแบบ JSON ได้อย่างไร


680

ฉันมีวัตถุขนาดใหญ่ที่ฉันต้องการแปลงเป็น JSON และส่ง อย่างไรก็ตามมีโครงสร้างเป็นวงกลม ฉันต้องการโยนการอ้างอิงแบบวงกลมใด ๆ ที่มีอยู่และส่งสิ่งที่สามารถทำให้เป็นสตริงได้ ฉันจะทำอย่างไร

ขอบคุณ

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

ฉันต้องการ string obj เป็น:

{"a":"foo"}

5
คุณช่วยกรุณาโพสต์วัตถุตัวอย่างด้วยการอ้างอิงแบบวงกลมที่คุณต้องการแยกวิเคราะห์ได้หรือไม่?
TWickz

3
อะไรแบบนี้ ?
Alvin Wong


2
สายไปงานเลี้ยง แต่มีโครงการgitHubเพื่อจัดการนี้
Preston S

คำถามที่เกี่ยวข้องอย่างใกล้ชิด: stackoverflow.com/questions/23117470/…
mathheadinclouds

คำตอบ:


606

ใช้JSON.stringifyร่วมกับ replacer แบบกำหนดเอง ตัวอย่างเช่น:

// 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 ใช้ HTMLElement องค์ประกอบใช้โหนดดำเนินการ EventTarget หมายเหตุ: นี่อาจขึ้นอยู่กับเบราว์เซอร์ต้นไม้ก่อนหน้านี้เป็นจริงสำหรับ Chrome)
Rob W

7
นี่เป็นสิ่งที่ผิดเพราะมันจะข้ามการปรากฏตัวครั้งที่สองของวัตถุที่มีอยู่สองครั้งแม้ว่าจะไม่ได้อยู่ในโครงสร้างที่เป็นวงจรจริงๆ var a={id:1}; JSON.stringify([a,a]);
user2451227

3
@ user2451227 "ตัวจำลองในตัวอย่างนี้ไม่ถูกต้อง 100% (ขึ้นอยู่กับคำจำกัดความของคุณของ" ซ้ำ ") แต่แนวคิดนี้ย่อมาจาก: ใช้ตัวจำลองแบบกำหนดเองและติดตามค่าวัตถุที่แยกวิเคราะห์"
Rob W

4
ข้อกังวลของ GC ที่นี่มีเนื้อหาซ้ำซ้อน หากสิ่งนี้ถูกเรียกใช้เป็นสคริปต์เดียวสคริปต์จะถูกยกเลิกทันที หากสิ่งนี้ถูกหุ้มไว้ในฟังก์ชั่นสำหรับการนำไปใช้งานผู้ใช้cacheจะไม่สามารถเข้าถึงdeveloper.mozilla.org/en-US/docs/Web/JavaScript/?hl=th
Trindaz

704

ใน Node.js คุณสามารถใช้util.inspect (วัตถุ) มันจะแทนที่ลิงก์แบบวงกลมด้วย "[เวียน]" โดยอัตโนมัติ


แม้ว่าจะมีอยู่แล้วภายใน(ไม่จำเป็นต้องติดตั้ง)คุณต้องนำเข้า

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

19
@Mitar มันมีอยู่แล้ว แต่คุณยังต้องโหลดโมดูลvar util = require('util');
bodecker

14
อย่าเป็นคนโง่เขลาเหมือนฉันเพียงแค่ obj_str = util.inspect(thing)ไม่ใช่ <s> garbage_str = JSON.stringify(util.inspect(thing))</s>
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
Yoda พูดว่า: "ถ้ายังรองรับ IE อยู่ก็ให้ใช้ transpiler อันควร"
รถไฟสเปน

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ใน chrome
roberto tomás

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 ย่อขนาด)
Brian Haak

16
ฉันคิดว่าคุณอาจต้องมีเหตุผลเพิ่มเติมสำหรับการใช้โมดูลมากกว่า "เพียงแค่ทำ" และมันก็ไม่ดีที่จะเขียนทับJSONหลักการ
Edwin

ฉันต้องการคัดลอกวัตถุเพื่อใช้ในการทดสอบสตับ คำตอบนี้สมบูรณ์แบบ ฉันคัดลอกวัตถุแล้วลบล้างการแทนที่ ขอบคุณ !!
Chris Sharp

1
ตามที่ผู้เขียนแพคเกจนี้ได้รับการปฏิเสธ CircularJSON อยู่ในการบำรุงรักษาเท่านั้นและแบนเป็นผู้สืบทอด Link: github.com/WebReflection/flatted#flatted
Robert Molina

3
ระวังแพ็คเกจ 'flatted' (และ Circular-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 "(ดู" + (!! value.constructor? value.constructor.name.toLowerCase (): typeof (value)) + "with key" + printedObjectInKey [printedObjIndex] + ")";
Isak

ฉันยินดีที่จะเพิ่ม แค่บอกให้ฉันรู้ว่าอะไรเป็นโมฆะเพราะฉันเจอปัญหาใด ๆ
guy mograbi

2
// เบราว์เซอร์จะไม่พิมพ์เกิน 20K - แต่คุณเพิ่มขีด จำกัด ไว้ที่ 2k อาจมีการเปลี่ยนแปลงในอนาคตหรือไม่
Pochen

38

@ คำตอบของ RobW ถูกต้อง แต่นี่เป็นสิ่งที่มีประสิทธิภาพมากกว่า! เพราะมันใช้ hashmap / set:

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 => github.com/ORESoftware/safe-stringify
Alexander Mills

อาจเป็นไปได้ว่าการติดตั้งใช้เพียงแค่ใช้อาร์เรย์และ indexOf ภายใต้ประทุน แต่ฉันยังไม่ได้ยืนยัน
Alexander Mills

นี่เป็นการลบโหนดพาเรนต์ที่มีโหนดลูกแม้ว่าจะมีค่าที่แตกต่างกันเช่น - {"a":{"b":{"a":"d"}}}และแม้แต่การลบโหนดที่มีวัตถุว่าง {}
Sandip Pingle

คุณสามารถแสดงตัวอย่างของ Sandip นั้นได้ไหม สร้าง gist.github.com หรืออะไรก็ตาม
Alexander Mills

ยอดเยี่ยม !!! อันดับแรก (จากด้านบน แต่ตรวจสอบโซลูชัน 2-3 ฟังก์ชันเท่านั้น) โซลูชันการทำงานที่นี่ภายใต้ node.js และ Fission ;-) - ไลบรารีแขวนคอ
Tom

37

โปรดทราบว่ายังมีJSON.decycleวิธีการใช้งานโดยดักลาสคร็อคฟอร์ด ดูเขา 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)));

ฉันได้แยกทางเพื่อแก้ไขปัญหานั้น (ดูfork cycle.jsของฉัน) สิ่งนี้จะทำงานได้ดี:

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"div#id-of-the-element"


2
ทั้งรหัสของคุณและของคุณให้ฉันเป็น "RangeError: ขนาดการโทรสูงสุดเกินขนาด" เมื่อฉันใช้
jcollum

ฉันสามารถดูได้ถ้าคุณให้รหัสของคุณบนซอหรือเพิ่มปัญหาใน Github: github.com/Eccenux/JSON-js/issues
Nux

นี่คือสิ่งที่ฉันกำลังมองหา JSON.decycle(a, true)จะเกิดอะไรขึ้นเมื่อคุณส่งค่า true เป็นพารามิเตอร์ไปยังฟังก์ชัน decycle
Rudra

@Rudra จริงทำให้stringifyNodesตัวเลือกเป็นจริงในทางแยก นี้จะถ่ายโอนข้อมูลเช่นdivมี id = "บาง id" div#some-idสตริง: คุณจะหลีกเลี่ยงปัญหาบางอย่าง แต่คุณจะไม่สามารถย้อนยุคได้อย่างเต็มที่
Nux

มีแพ็กเกจnpm เป็น npmjs.com/package/json-jsแต่มันไม่ได้รับการปรับปรุงชั่วขณะ
Michael Freidgeim

23

ฉันขอแนะนำให้เช็คเอาท์ json-stringify-safeจาก @ isaacs - มันถูกใช้ใน NPM

BTW- หากคุณไม่ได้ใช้ 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]'
}

โปรดทราบว่าเช่นเดียวกับวานิลลาฟังก์ชั่นเป็น JSON.stringify @ Rob W กล่าวนอกจากนี้คุณยังสามารถปรับแต่งพฤติกรรมการฆ่าเชื้อโดยผ่านใน "ทดแทน" stringify()ฟังก์ชั่นเป็นอาร์กิวเมนต์ที่สองที่จะ หากคุณพบว่าตัวเองต้องเป็นตัวอย่างง่ายๆของวิธีการทำนี้ผมเพิ่งเขียนทดแทนที่กำหนดเองซึ่ง coerces ข้อผิดพลาด regexps และฟังก์ชั่นเป็นสตริงมนุษย์สามารถอ่านได้ที่นี่


13

สำหรับชาว Google ในอนาคตหาวิธีแก้ปัญหาเพื่อแก้ไขปัญหานี้เมื่อคุณไม่ได้รู้ว่ากุญแจของการอ้างอิงแบบวงกลมทั้งหมดที่คุณสามารถใช้ห่อหุ้มรอบฟังก์ชัน JSON.stringify เพื่อออกกฎการอ้างอิงแบบวงกลม ดูสคริปต์ตัวอย่างได้ที่https://gist.github.com/4653128 https://gist.github.com/4653128

วิธีการแก้ปัญหานั้นจำเป็นอย่างยิ่งที่จะต้องอ้างอิงถึงออบเจ็กต์ที่พิมพ์ไว้ก่อนหน้านี้ในอาเรย์และตรวจสอบว่าในฟังก์ชั่นเรพลิเคเตอร์ก่อนที่จะส่งคืนค่า มันมีความหดหู่มากกว่าเพียงแค่ตัดการอ้างอิงแบบวงกลมออกไปเท่านั้นเนื่องจากมันยังออกกฎการพิมพ์วัตถุสองครั้งหนึ่งในนั้นมีผลกระทบด้านหนึ่งที่จะหลีกเลี่ยงการอ้างอิงแบบวงกลม

เสื้อคลุมตัวอย่าง:

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)เพราะindexสามารถ0แปลได้falseเว้นแต่คุณจะระบุไว้เป็นอย่างอื่นอย่างชัดเจน
guy mograbi

1
@guymograbi คุณไม่ได้หมายถึง===เหรอ? 0 == falseเป็นtrue, เป็น0 === false false; ^) แต่ฉันไม่ต้องการเริ่มต้นprintedObjIndexเป็นเท็จจากนั้นคุณสามารถตรวจสอบundefinedเพื่อให้คุณ (ดี Trindaz ของ) ไม่ผสมคำอุปมาอุปมัยอย่างแปลก
ruffin

@ รัฟฟินจับดี ใช่แน่นอนใช้ความเสมอภาคและ jshint เสมอเพื่อจับความผิดพลาดโง่ ๆ
ผู้ชาย mograbi

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 เพื่อค้นหาว่าคุณสมบัตินั้นเป็นประเภท 'วัตถุ' (อ้างอิง) และการตรวจสอบความเท่าเทียมกันที่แน่นอน (===) เพื่อตรวจสอบการอ้างอิงแบบวงกลม


4
สิ่งนี้อาจใช้งานได้ใน IE เท่านั้น (เนื่องจากข้อเท็จจริงที่ว่า MSDN เป็นเอกสารจาก Microsoft และ Microsoft สร้าง IE) ใน Firefox / Chrome jsfiddle.net/ppmaWจะสร้างข้อผิดพลาดในการอ้างอิงแบบวงกลม FYI: var obj = {foo:obj}ไม่ได้สร้างการอ้างอิงแบบวงกลม แต่จะสร้างวัตถุที่มีfooคุณสมบัติอ้างถึงค่าก่อนหน้าของobj( undefinedถ้าไม่ได้กำหนดไว้ก่อนหน้านี้ประกาศเนื่องจาก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
อาจเป็นเพราะมันพิมพ์ได้แค่ระดับเดียวเท่านั้น?
Alex Turpin

ง่ายมากฉัน upvoted นี้เพราะมันทำงานให้ฉันออกจากกล่องในโครเมี่ยม EXCELLENT
ความรักและสันติภาพ - Joe Codeswell

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

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันอยากจะแนะนำแพ็กเกจ NPM ที่ฉันสร้างขึ้นซึ่งเรียกว่าสมาร์ทเวียนซึ่งทำงานแตกต่างจากวิธีอื่น ๆ ที่เสนอ มันมีประโยชน์เป็นพิเศษหากคุณใช้วัตถุขนาดใหญ่และลึกวัตถุที่มีขนาดใหญ่และลึก

คุณสมบัติบางอย่างคือ:

  • การแทนที่การอ้างอิงแบบวงกลมหรือโครงสร้างที่ทำซ้ำภายในวัตถุโดยเส้นทางที่นำไปสู่การเกิดขึ้นครั้งแรก (ไม่ใช่แค่สตริง[วงเวียน] );

  • ด้วยการมองหาหนังสือเวียนในการค้นหาแบบกว้าง ๆ แพ็คเกจจะทำให้เส้นทางนี้มีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ซึ่งมีความสำคัญเมื่อต้องจัดการกับวัตถุที่มีขนาดใหญ่และลึกมาก JSON.stringify ทำ DFS);

  • ช่วยให้การเปลี่ยนแบบส่วนบุคคลสะดวกในการทำให้ง่ายขึ้นหรือไม่สนใจส่วนที่สำคัญน้อยกว่าของวัตถุ

  • ในที่สุดเส้นทางจะถูกเขียนอย่างแม่นยำตามวิธีที่จำเป็นในการเข้าถึงฟิลด์อ้างอิงซึ่งสามารถช่วยคุณในการดีบัก


3

อาร์กิวเมนต์ที่สองเพื่อ JSON.stringify () ยังช่วยให้คุณสามารถระบุอาร์เรย์ของชื่อคีย์ที่ควรเก็บรักษาไว้จากทุกวัตถุที่พบในข้อมูลของคุณ สิ่งนี้อาจใช้ไม่ได้กับทุกกรณี แต่เป็นวิธีที่ง่ายกว่ามาก

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 ล่าสุด ความหมายในคำตอบนี้มีการปรับเปลี่ยนเพื่อที่จะได้โยนความผิดพลาด



คำตอบนี้ควรได้รับการยอมรับ
Manic Depression

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

ฉันพบห้องสมุด Circular-json บน GitHubและทำงานได้ดีสำหรับปัญหาของฉัน

คุณสมบัติที่ดีที่ฉันพบมีประโยชน์:

  • รองรับการใช้งานหลายแพลตฟอร์ม แต่ฉันทดสอบด้วย node.js เท่านั้น
  • API เหมือนกันดังนั้นสิ่งที่คุณต้องทำคือรวมและใช้แทน JSON
  • มันมีวิธีการแยกวิเคราะห์เป็นของตัวเองเพื่อให้คุณสามารถแปลงข้อมูล 'วงกลม' ต่อเนื่องเป็นวัตถุ

2
ห้องสมุดนี้โยนข้อผิดพลาดให้ฉันดังนั้นฉันต้องหาคนอื่น ข้อผิดพลาด TypeError: toISOString ไม่ใช่ฟังก์ชันที่ String.toJSON (<anonymous>) ที่ Object <anonymous> ( localhost: 8100 / build / polyfills.js: 1: 3458 ) ที่ JSON.stringify (<anonymous>) ที่ Object stringifyRecursion [as 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

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

โซลูชันอื่นสำหรับการแก้ไขปัญหานี้ด้วยวัตถุประเภทนี้คือการใช้ไลบรารีนี้

https://github.com/ericmuyser/stringy

มันง่ายและคุณสามารถในขั้นตอนง่าย ๆ แก้ปัญหานี้


0

ตามคำตอบอื่น ๆ ฉันท้ายด้วยรหัสต่อไปนี้ มันใช้งานได้ดีกับการอ้างอิงแบบวงกลมวัตถุที่มีตัวสร้างแบบกำหนดเอง

จากวัตถุที่กำหนดที่จะต่อเนื่องกัน

  • แคชวัตถุทั้งหมดที่คุณเจอในขณะที่สำรวจวัตถุและกำหนด hashID ที่ไม่ซ้ำกันแต่ละอัน (หมายเลขที่เพิ่มขึ้นอัตโนมัติยังใช้งานได้)
  • เมื่อพบการอ้างอิงแบบวงกลมให้ทำเครื่องหมายฟิลด์นั้นในวัตถุใหม่เป็นแบบวงกลมและเก็บ hashID ของวัตถุดั้งเดิมเป็นแอตทริบิวต์

ลิงค์ Github - นำกลับมาใช้ใหม่ JSON

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

คำตอบแบบรหัสเท่านั้นจะหมดกำลังใจ โปรดคลิกที่แก้ไขและเพิ่มคำศัพท์ที่สรุปว่ารหัสของคุณตอบคำถามอย่างไรหรืออาจอธิบายว่าคำตอบของคุณแตกต่างจากคำตอบ / คำตอบก่อนหน้านี้อย่างไร จากการตรวจสอบ
นิค

0

ในโซลูชันของฉันถ้าคุณเจอรอบมันไม่เพียง แต่พูดว่า "รอบ" (หรืออะไรก็ได้) มันพูดอะไรบางอย่างเช่น foo: ดูวัตถุ # 42 ด้านบนและเพื่อดูว่าจุดใดที่ foo ชี้ไปที่คุณสามารถเลื่อนขึ้นและค้นหา สำหรับออบเจ็กต์ # 42 (แต่ละออบเจ็กต์เมื่อเริ่มต้นจะพูดว่า object # 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.