Chrome 송신 요청 오류:TypeError: 원형 구조를 JSON으로 변환하는 중

Chrome 송신 요청 오류:TypeError: 원형 구조를 JSON으로 변환하는 중

난 다음과 같은 것을 가지고 있어...

chrome.extension.sendRequest({
  req: "getDocument",
  docu: pagedoc,
  name: 'name'
}, function(response){
  var efjs = response.reply;
});

다음과 같이 호출합니다.

case "getBrowserForDocumentAttribute":
  alert("ZOMG HERE");
  sendResponse({
    reply: getBrowserForDocumentAttribute(request.docu,request.name)
  });
  break;

내 는 ' 'ZOMG HERE' 실행 중에 시킵니다.chrome.extension.sendRequest

 Uncaught TypeError: Converting circular structure to JSON
 chromeHidden.JSON.stringify
 chrome.Port.postMessage
 chrome.initExtension.chrome.extension.sendRequest
 suggestQuery

원인이 뭔지 아는 사람 있나요?

즉, 요청으로 전달된 오브젝트가pagedoc는 다음과 참조가

var a = {};
a.b = a;

JSON.stringify을 사용법

주의: 이것은 DOM 노드가 DOM 트리에 연결되어 있지 않더라도 순환 참조가 있는 경우입니다.각 노드에는 다음과 같은 것이 있습니다.document대부분의 경우. document 대한 .DOM 트리는 DOM에서 참조됩니다.document.body ★★★★★★★★★★★★★★★★★」document.body.ownerDocument document이는 DOM 트리의 여러 순환 참조 중 하나에 불과합니다.

Mozilla의 JSON 문서에 따르면JSON.stringify에는 두 파라미터가 .replacer트리를 해석하는 동안 하위 항목을 필터링/삭제하는 데 사용할 수 있습니다.을 사용하다

Node.js에서는 할 수 없습니다.다음과 같은 작업을 수행할 수 있습니다.

function censor(censor) {
  var i = 0;
  
  return function(key, value) {
    if(i !== 0 && typeof(censor) === 'object' && typeof(value) == 'object' && censor == value) 
      return '[Circular]'; 
    
    if(i >= 29) // seems to be a harded maximum of 30 serialized objects?
      return '[Unknown]';
    
    ++i; // so we know we aren't using the original object anymore
    
    return value;  
  }
}

var b = {foo: {bar: null}};

b.foo.bar = b;

console.log("Censoring: ", b);

console.log("Result: ", JSON.stringify(b, censor(b)));

그 결과:

Censoring:  { foo: { bar: [Circular] } }
Result: {"foo":{"bar":"[Circular]"}}

유감스럽게도 자동으로 순환으로 간주되기 전에 최대 30번의 반복이 있는 것 같습니다.그렇지 않으면 이 방법이 효과가 있을 것입니다.나는 심지어 사용했다.areEquivalent 여기서부터지만JSON.stringify30분그래도, 만약 당신이 정말로 필요하다면, 그 오브젝트를 최상급으로 적절히 표현해도 충분합니다.하지만 누군가 이것을 개선할 수 있을까요?HTTP "Node.js" "Node.js" "Node.js" "Node.js."

{
"limit": null,
"size": 0,
"chunks": [],
"writable": true,
"readable": false,
"_events": {
    "pipe": [null, null],
    "error": [null]
},
"before": [null],
"after": [],
"response": {
    "output": [],
    "outputEncodings": [],
    "writable": true,
    "_last": false,
    "chunkedEncoding": false,
    "shouldKeepAlive": true,
    "useChunkedEncodingByDefault": true,
    "_hasBody": true,
    "_trailer": "",
    "finished": false,
    "socket": {
        "_handle": {
            "writeQueueSize": 0,
            "socket": "[Unknown]",
            "onread": "[Unknown]"
        },
        "_pendingWriteReqs": "[Unknown]",
        "_flags": "[Unknown]",
        "_connectQueueSize": "[Unknown]",
        "destroyed": "[Unknown]",
        "bytesRead": "[Unknown]",
        "bytesWritten": "[Unknown]",
        "allowHalfOpen": "[Unknown]",
        "writable": "[Unknown]",
        "readable": "[Unknown]",
        "server": "[Unknown]",
        "ondrain": "[Unknown]",
        "_idleTimeout": "[Unknown]",
        "_idleNext": "[Unknown]",
        "_idlePrev": "[Unknown]",
        "_idleStart": "[Unknown]",
        "_events": "[Unknown]",
        "ondata": "[Unknown]",
        "onend": "[Unknown]",
        "_httpMessage": "[Unknown]"
    },
    "connection": "[Unknown]",
    "_events": "[Unknown]",
    "_headers": "[Unknown]",
    "_headerNames": "[Unknown]",
    "_pipeCount": "[Unknown]"
},
"headers": "[Unknown]",
"target": "[Unknown]",
"_pipeCount": "[Unknown]",
"method": "[Unknown]",
"url": "[Unknown]",
"query": "[Unknown]",
"ended": "[Unknown]"
}

이를 위해 작은 Node.js 모듈을 만들었습니다.https://github.com/ericmuyser/stringy 자유롭게 개선/실행하세요!

한 가지 방법은 주 객체에서 객체와 기능을 제거하는 것입니다.그리고 좀 더 단순한 형태를 만들어라.

function simpleStringify (object){
    // stringify an object, avoiding circular structures
    // https://stackoverflow.com/a/31557814
    var simpleObject = {};
    for (var prop in object ){
        if (!object.hasOwnProperty(prop)){
            continue;
        }
        if (typeof(object[prop]) == 'object'){
            continue;
        }
        if (typeof(object[prop]) == 'function'){
            continue;
        }
        simpleObject[prop] = object[prop];
    }
    return JSON.stringify(simpleObject); // returns cleaned up JSON
};

저는 보통 이것을 해결하기 위해 circular-json npm 패키지를 사용합니다.

// Felix Kling's example
var a = {};
a.b = a;
// load circular-json module
var CircularJSON = require('circular-json');
console.log(CircularJSON.stringify(a));
//result
{"b":"~"}

주의: Circular-json은 더 이상 사용되지 않습니다. 이제 플랫(Circular-J의 작성자)을 사용합니다.아들:

// ESM
import {parse, stringify} from 'flatted/esm';

// CJS
const {parse, stringify} = require('flatted/cjs');

const a = [{}];
a[0].a = a;
a.push(a);

stringify(a); // [["1","0"],{"a":"0"}]

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

자인 엔지니어의 답변에 따르면...또 다른 접근법은 객체의 깊은 복사본을 만들고 원형 참조를 제거하고 결과를 문자열화하는 것입니다.

function cleanStringify(object) {
    if (object && typeof object === 'object') {
        object = copyWithoutCircularReferences([object], object);
    }
    return JSON.stringify(object);

    function copyWithoutCircularReferences(references, object) {
        var cleanObject = {};
        Object.keys(object).forEach(function(key) {
            var value = object[key];
            if (value && typeof value === 'object') {
                if (references.indexOf(value) < 0) {
                    references.push(value);
                    cleanObject[key] = copyWithoutCircularReferences(references, value);
                    references.pop();
                } else {
                    cleanObject[key] = '###_Circular_###';
                }
            } else if (typeof value !== 'function') {
                cleanObject[key] = value;
            }
        });
        return cleanObject;
    }
}

// Example

var a = {
    name: "a"
};

var b = {
    name: "b"
};

b.a = a;
a.b = b;

console.log(cleanStringify(a));
console.log(cleanStringify(b));

제 경우 루트 작성 중에 비동기/대기 기능을 사용하는 것을 잊어버렸습니다.

app.get('/products', async (req, res) => {
    const products = await Product.find();
    res.send(products );
});

노드에서 이 문제를 해결합니다.JS는 다음과 같습니다.

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

제 경우, 사용 중 오류가 발생했습니다.asyncmongoose를 사용하여 . 보니 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★await를 호출하기 find({}) adding. 그 부분을 해서 문제가 그 부분을 추가해서 제 문제를 해결했어요.

이렇게 하면 원형인 속성을 알 수 있습니다.또한 참조를 사용하여 객체를 재구성할 수 있습니다.

  JSON.stringifyWithCircularRefs = (function() {
    const refs = new Map();
    const parents = [];
    const path = ["this"];

    function clear() {
      refs.clear();
      parents.length = 0;
      path.length = 1;
    }

    function updateParents(key, value) {
      var idx = parents.length - 1;
      var prev = parents[idx];
      if (prev[key] === value || idx === 0) {
        path.push(key);
        parents.push(value);
      } else {
        while (idx-- >= 0) {
          prev = parents[idx];
          if (prev[key] === value) {
            idx += 2;
            parents.length = idx;
            path.length = idx;
            --idx;
            parents[idx] = value;
            path[idx] = key;
            break;
          }
        }
      }
    }

    function checkCircular(key, value) {
      if (value != null) {
        if (typeof value === "object") {
          if (key) { updateParents(key, value); }

          let other = refs.get(value);
          if (other) {
            return '[Circular Reference]' + other;
          } else {
            refs.set(value, path.join('.'));
          }
        }
      }
      return value;
    }

    return function stringifyWithCircularRefs(obj, space) {
      try {
        parents.push(obj);
        return JSON.stringify(obj, checkCircular, space);
      } finally {
        clear();
      }
    }
  })();

많은 노이즈가 제거된 예:

{
    "requestStartTime": "2020-05-22...",
    "ws": {
        "_events": {},
        "readyState": 2,
        "_closeTimer": {
            "_idleTimeout": 30000,
            "_idlePrev": {
                "_idleNext": "[Circular Reference]this.ws._closeTimer",
                "_idlePrev": "[Circular Reference]this.ws._closeTimer",
                "expiry": 33764,
                "id": -9007199254740987,
                "msecs": 30000,
                "priorityQueuePosition": 2
            },
            "_idleNext": "[Circular Reference]this.ws._closeTimer._idlePrev",
            "_idleStart": 3764,
            "_destroyed": false
        },
        "_closeCode": 1006,
        "_extensions": {},
        "_receiver": {
            "_binaryType": "nodebuffer",
            "_extensions": "[Circular Reference]this.ws._extensions",
        },
        "_sender": {
            "_extensions": "[Circular Reference]this.ws._extensions",
            "_socket": {
                "_tlsOptions": {
                    "pipe": false,
                    "secureContext": {
                        "context": {},
                        "singleUse": true
                    },
                },
                "ssl": {
                    "_parent": {
                        "reading": true
                    },
                    "_secureContext": "[Circular Reference]this.ws._sender._socket._tlsOptions.secureContext",
                    "reading": true
                }
            },
            "_firstFragment": true,
            "_compress": false,
            "_bufferedBytes": 0,
            "_deflating": false,
            "_queue": []
        },
        "_socket": "[Circular Reference]this.ws._sender._socket"
    }
}

JSON하려면 속성을 루프하여 "JSON.parse()"를.[Circular Reference]...평 it...와 함께 하다this이치노

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★♪ 게 것 string.split('.')그런 다음 이름으로 속성을 검색하여 참조를 설정합니다.

여기서 다른 문제가 발생했습니다.html 요소에서 오브젝트 배열로 값을 가져오고 있었습니다.한 필드에서는 값을 잘못 할당했기 때문에 이 예외가 발생했습니다. 표현: " " " " :obj.firstname=$("txFirstName") 표현 : " " " " : "obj.firstname=$("txFirstName").val()

j를 사용하여 아래 할 때 했습니다.Query에서 아래 메시지를 작성하려고 할 때 동일한 오류가 발생했습니다.순환 참조는 다음과 같은 경우에 발생합니다.reviewerName msg.detail.reviewerName 행을해 주세요. JQuery .val() 입니다.마지막 행을 참조해 주세요.

var reviewerName = $('reviewerName'); // <input type="text" id="taskName" />;
var msg = {"type":"A", "detail":{"managerReview":true} };
msg.detail.reviewerName = reviewerName; // Error
msg.detail.reviewerName = reviewerName.val(); // Fixed

제 경우 코드 변경 후 유닛 테스트에 남은 것은 flush()입니다.

전에

it('something should be...', () => {
// do tests
flush();
}

끝나고

it('something should be...', () => {
// do tests
}

이 경우 React Native를 사용하여 디버깅을 시도했습니다.

console.log(JSON.stringify(object))

다음 오류가 발생했습니다.

TypeError: Converting circular structure to JSON

플레인만 사용하면 오브젝트를 콘솔에 기록할 수 있을 것 같습니다.

console.log(object)

jQuery formvaliadator에서도 같은 오류가 발생했는데 console.log insuccess: function을 삭제했을 때 동작했습니다.

Node.js v10.22.1(GitLab CI 서버에서 실행되는 버전)에 잘못된 원형 참조 디텍터가 있습니다.로컬에서 실행되는 버전(v12.8.0)은 실제 순환 참조가 아님을 알 수 있을 정도로 스마트합니다.

다른 사람이 같은 문제를 가지고 있고 그 대상이 실제로 순환 참조가 아닌 경우에 대비하여 이 답변을 추가합니다.

원래 응답 개체는 다음과 같습니다.

var res = {
    "status":"OK",
    "message":"Success",
    "errCode":":",
    "data":"",
    "appCfg":{
        "acp_age":"2yy",
        "acp_us":"yes",
        "mode":"admin",
        "version":"v1.21.07.1"
    },
    "reqID":59833,
    "email":{
        "status":"OK",
        "message":"Success"
    },
    "emailStatus":"sent"
}

했습니다.res.email.status 같았습니다res.status텍스트 요소이기 때문에 순환이 아닙니다만, 이름과 값이 JSON.stringify 파서에 문제가 있는 것 같습니다.

제거했습니다.res.email모든 것이 정상입니다.서버 호출 중에 수행된 모든 고유 액션에서 독립된 상태와 세부 메시지를 수집하려고 했습니다. 이제 '원소'로.res.emailStatus위의 예에도 포함되어 있습니다.

이런 거 했을 수도 있어

<Button onClick={fetchSuggestions}>

해당 함수에 '이벤트 개체'를 전달했는지 인식하지 못함

전달하지 않으려면 빈 문자열을 보내십시오.

<Button onClick={() => fetchSuggestions()}>

  const fetchSuggestions = async (propsSession) => {
    const {
      error,
      hasNextDoc,
      suggestions: moreSuggestions,
    } = await fetcher(`/admin/fetchSuggestion`, {
      initialRequest: !!propsSession,
      session: propsSession || session,
    });
  }

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#issue_with_json.stringify_when_serializing_circular_references

직접 변환할 수 없는 순환 json입니다.

해결책 1:

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

// ESM
import {parse, stringify, toJSON, fromJSON} from 'flatted';

// CJS
const {parse, stringify, toJSON, fromJSON} = require('flatted');

const a = [{}];
a[0].a = a;
a.push(a);

stringify(a); // [["1","0"],{"a":"0"}]

해결책 2: (MDN도 마찬가지)

https://github.com/douglascrockford/JSON-js

언급URL : https://stackoverflow.com/questions/4816099/chrome-sendrequest-error-typeerror-converting-circular-structure-to-json