[javascript] 자바스크립트 "[object Object]" is not valid JSON 에러 알아보기

 

 

안녕하세요!

오늘은 자바스크립트에서 종종 마주치게 되는 "[object Object]" is not valid JSON 에러에 대해 알아보려고 해요.

이 에러는 주로 JSON.parse() 함수를 사용할 때 발생하곤 합니다. JSON.parse() 함수는 JSON 형식의 문자열을 자바스크립트 객체로 변환해 주는데, 그런데 JSON 형식이 아닌 문자열을 이 함수에 전달하면 에러가 나타나게 됩니다.

정말 간단하게 말하면, JSON 형식의 규칙에 맞지 않는 문자열을 사용하면서 JSON.parse() 함수를 호출하면 이 에러가 나타나게 됩니다.

그러면 어떤 상황에서 위와 같은 에러가 발생을 하는지 간단한 예제 코드를 통해서 정리해 보도록 하겠습니다.

 

---

JSON.parse()

JSON.parse()는 자바스크립트의 내장 함수 중 하나로, JSON 형식의 문자열을 자바스크립트 객체로 변환하는 역할을 합니다. 즉, JSON 문자열을 파싱하여 객체로 변환하는 것입니다.

---

에러가 발생하는 예제 소스 코드

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {
    
    // JSON 형태의 데이터
    
    const dataObj = {"name"  : "test", "list"  : ["a", "b", "c", "d", "e"]};

    console.log(JSON.parse(dataObj));
});
</script>

위의 소스 코드를 살펴보면 JSON 형태의 dataObj 값을 JSON.parse() 함수를 사용하여 JSON 형식으로 파싱하려고 합니다. 그러나 JSON.parse() 함수는 JSON 문자열 값만 정상적으로 파싱 할 수 있습니다. 이미 JSON 형태의 값을 dataObj로 가지고 있기 때문에 실행하면 "[object Object]" is not valid JSON 에러가 발생하게 됩니다.

이러한 에러가 발생했을 때 해결하는 방법은 여러 가지가 있습니다.
    1. JSON 형태의 객체를 문자열로 변경하는 방법입니다. 이렇게 하면 객체가 JSON 문자열로 변환되어 JSON.parse() 함수로

        파싱할 수 있습니다.

    2. JSON.parse() 함수를 JSON.stringify() 함수로 대체하는 방법입니다. JSON.stringify() 함수를 사용하여 객체를 JSON

        문자열로 변환한 후, 다시 JSON.parse() 함수로 파싱하면 문제가 해결됩니다.

    3. try/catch 문을 사용하여 예외 처리하는 방법입니다. try 블록 안에 JSON.parse() 함수를 사용하고, catch 블록에서 예외를

        처리할 수 있습니다.

 

 

그러면 위와 같은 해결 방법에 대한 예제 코드를 정리해보도록 하겠습니다.

 

 

---

해결 방법

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {
    
    // JSON 형태의 데이터
    const dataObj = {"name"  : "test", "list"  : ["a", "b", "c", "d", "e"]};

    // 방법 1: JSON.stringify() 함수를 사용하여 객체를 JSON 문자열로 변환
    const jsonString = JSON.stringify(dataObj);
    console.log(JSON.parse(jsonString)); // JSON 문자열을 객체로 파싱

    // 방법 2: JSON.parse() 함수를 JSON.stringify() 함수로 대체
    const parsedObject = JSON.parse(JSON.stringify(dataObj));
    console.log(parsedObject); // JSON 문자열을 객체로 파싱

    // 방법 3: try/catch 예외 처리
    try {
      const parsedObject2 = JSON.parse(dataObj); // 에러 발생
      console.log(parsedObject2);
    } catch (error) {
      console.error("에러 발생:", error.message);
    }
});
</script>

위의 예제 소스 코드를 보면 앞서 정리한 세 가지의 해결 방법이 포함된 코드입니다. 업무 환경과 상황에 따라 다양한 방법으로 문제를 해결할 수 있을 것입니다.

 

---

최종 정리

 

오늘은 자바스크립트에서 JSON 데이터를 다룰 때 종종 발생할 수 있는 "[object Object]" is not valid JSON 에러에 대해서 정리해 보았습니다. 이러한 에러는 JSON 형식을 다룰 때 간단한 실수로 인해 발생할 수 있습니다. 때로는 소스 코드 상에서는 문법 에러가 표시되지 않아서 추후에 발견되기도 합니다. 그러나 이러한 에러의 원인은 주로 간단하고 눈에 띄는 실수들입니다.

이번 정리에서는 주로 JSON.parse() 함수를 다루었습니다. JSON.parse() 함수는 JSON 형식의 문자열을 자바스크립트 객체로 변환하는데 사용되며, 유효한 JSON 형식의 문자열을 기대합니다. 이미 JSON 형태의 객체를 JSON.parse() 함수에 전달하면 

"[object Object]" is not valid JSON 에러가 발생하게 됩니다.

하지만 우리는 이러한 에러를 간단한 방법으로 해결할 수 있습니다. JSON 데이터를 다룰 때 아래와 같은 방법들을 사용하여 에러를 방지할 수 있습니다.

  1. JSON 형태의 객체를 문자열로 변경하는 방법
  2. JSON.parse() 함수를 JSON.stringify() 함수로 대체하는 방법
  3. try/catch 문을 사용하여 예외 처리하는 방법

이러한 방법들을 활용하면 JSON 데이터를 정상적으로 다룰 수 있으며, 더욱 효율적인 개발을 할 수 있습니다.

자바스크립트를 개발하다 보면 발생하는 간단한 실수 때문에 에러가 발생할 수 있지만, 평소에 에러 내용만 한번씩 정리해 본다면 조금 더 품질 놓은 소스 코드를 만들어 나갈 수 있습니다.

그럼 다음 포스팅에도 다양한 에러 내용들을 정리해보도록 하겠습니다.

 

감사합니다.