HOWTO · JavaScript

TypeError: 원형 구조를 JSON으로 변환

이 문서는 TypeError: JavaScript에서 원형 구조를 JSON으로 변환하는 문제를 해결하는 데 도움이 됩니다.

이 페이지의 내용

JSON.stringify() 함수에 대한 순환 참조를 포함하는 객체를 보낼 때 TypeError: Converting circular structure to JSON 문제가 발생합니다. 객체를 JSON으로 변환하기 전에 순환 참조를 피하십시오.

JavaScript에서 TypeError: 원형 구조를 JSON으로 변환 수정

이 문제는 flatted 패키지를 사용하여 해결할 수 있습니다. flatted 패키지는 CircularJSON의 발명가가 직접 제공하는 놀랍도록 가볍고 빠른 Circular JSON 파서입니다.

먼저 flatted 패키지를 설치해야 하며 다음과 같은 방법으로 설치할 수 있습니다.

npm i flatted

flatted 패키지를 사용하는 한 가지 예를 살펴보겠습니다.

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

var sports = [{cricket: 1}, {football: '2'}];
sports[0].a = sports;
stringify(sports);

console.log(sports);

출력:

플랫 패키지 사용

JSON.stringify()는 유효한 객체를 문자열로 변환할 뿐만 아니라 함수가 구성된 경우 값을 대체할 수 있는 replacer 매개변수도 있습니다.

let sportsmanObj = {
  name: 'Shiv',
  age: 22,
  gender: 'Male',
};

sportsmanObj.myself = sportsmanObj;

const circularFunc = () => {
  const sited = new WeakSet();
  return (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (sited.has(value)) {
        return;
      }
      sited.add(value);
    }
    return value;
  };
};

JSON.stringify(sportsmanObj, circularFunc());
console.log(sportsmanObj);

실행 코드

위의 circularFunc에서 WeakSet 개체를 호출하고 있습니다. 이 개체는 약하게 유지되는 항목이나 사물에 대한 포인터를 저장하는 개체입니다.

WeakSet의 각 개체는 한 번만 나타날 수 있으며 반복적이거나 순환적인 데이터를 제거합니다. new 키워드는 새 개체를 만드는 연산자입니다.

우리는 return 문에 if 문을 중첩했습니다. typeof 연산자는 프리미티브(Undefined, Null, Boolean, Number, String, Function, BigInt, Symbol를 반환하기 위해 첫 번째 if 문에서 사용됩니다. ) 평가를 받고 있습니다.

값 유형이 객체와 정확하게 동일하고 해당 객체의 중요도가 null이 아닌 경우 두 번째 if 조건으로 진행하여 값이 WeakSet()에 있는지 확인합니다. 우리는 원래의 순환 구조와 교체 메서드를 JSON.stringify()로 보냅니다.

이렇게 하면 콘솔에서 원하는 문자열화된 결과를 얻을 수 있습니다.

{
  age: 22,
  gender: "Male",
  myself: [circular object Object],
  name: "Shiv"
}