[Javascript] JSON 문자열을 객체로 변경하기

 

지난번에는 객체를 JSON 문자열로 변경하는 방법을 알아보았습니다.

[Javascript] 객체를 JSON으로 변환하기

 

이번에는 반대로 JSON 문자열을 객체로 변경하는 방법을 알아보겠습니다.

 

1. JSON.parse() 함수
2. JSON 문자열의 값을 변경하여 객체로 변환하기

 

 

1. JSON.parse() 함수

JSON.parse(text[, reviver])

JSON 문자열을 객체로 변경할 때는 JSON.parse() 함수를 사용합니다.

 

 파라미터 

text (필수입력)

객체로 변환할 JSON 문자열

 

reviver (선택입력)

JSON 문자열을 객체로 변환하여 리턴하기 전에, 값을 변형시키기 위한 함수

 

예제

const json = `{
  "id" : 123,
  "product" : {
    "type" : "book",
    "page" : 200,
    "title" : "Javascript",
    "tags" : ["JS", "Beginner"],
    "date" : "2020-12-13"
  }
}`;

const obj = JSON.parse(json);

document.write(obj.id + '<br>'); // 123
document.write(obj.product.title + '<br>'); // Javascript
document.write(obj.product.tags[1] + '<br>'); // Beginner
document.write(obj.product.date); // 2020-12-13

 

JSON.parse() 함수에 JSON 문자열을 파라미터로 전달하여, 

JSON 문자열을 객체로 변환하였습니다.

이제 obj는 객체 형태이기 때문에 '.' 연산자를 사용하여

각각의 값에 접근할 수 있게 되었습니다.

 

 

 

2. JSON 문자열의 값을 변경하여 객체로 변환하기

JSON.pare() 함수의 2번째 파라미터를 사용하여

JSON 문자열을 객체로 변환하기 전에 특정 속성의 값을 변경할 수 있습니다.

 

예시 

const json = `{
  "id" : 123,
  "product" : {
    "type" : "book",
    "page" : 200,
    "title" : "Javascript",
    "tags" : ["JS", "Beginner"],
    "date" : "2020-12-13"
  }
}`;

const obj = JSON.parse(json);

document.write(typeof obj.product.date); // string

위 예제를 먼저 살펴보면,

JSON.parse() 함수를 이용하여 JSON 문자열을 객체로 변경하였습니다.

이 때 obj.product.date 속성의 값은 날짜를 나타냅니다.

그리고, 이 속성은 문자열로 변환이 됩니다.

그런데, 이 date 속성을 Date 객체로 변환하여 객체에 넣고 싶다면 어떻게 해야 할까요?

 

 

다음과 같이 JSON.pare() 함수의 2번째 파라미터(reviver)를 활용할 수 있습니다.

const json = `{
  "id" : 123,
  "product" : {
    "type" : "book",
    "page" : 200,
    "title" : "Javascript",
    "tags" : ["JS", "Beginner"],
    "date" : "2020-12-13"
  }
}`;

function getDateObject(key, value) {
  if (key === 'date') return new Date(value);
  return value;
}

const obj = JSON.parse(json, getDateObject);

document.write(typeof obj.product.date); // object
document.write('<br>');
document.write(obj.product.date.getDate()); // 13

 

JSON.parse() 함수의 2번째 파라미터로 함수가 전달되면

JSON.parse() 함수는 분석한 객체의 각 속성의 key와 value를 이 함수로 전달합니다.

그리고 이 함수가 리턴하는 값을 다시 최종 결과의 속성값으로 설정합니다.

만약, 이 함수에서 아무런 값도 리턴하지 않거나 undefined를 리턴하면 

그 속성은 최종 결과에서 제외됩니다.

 

위 예제의 getDateObject(key, value) 함수는

속성의 'key'가 'date'인 경우에 

속성값인 문자열을 Date 객체로 변환(new Date() 사용)하여 리턴합니다.

만약, key가 'date'가 아닌 다른 속성이 들어오면

원래의 속성값(value)을 그대로 리턴해 주고 있습니다.

즉, 이 함수는 JSON 문자열의 여러 항목 중

'key'가 'date'인 항목의 값을,

문자열이 아닌 Date 객체로 변환해서 최종 결과에 포함시켜줍니다.

그리고, 나머지 값들은 다른 변경 없이 그대로 최종 결과에 포함시켜줍니다.

만약, key가 'date'가 아닌 경우에, 원래의 속성값을 리턴해주지 않으면,

나머지 속성들이 최종 결과에 포함되지 않을 것이기 때문에

이 점을 주의해야 합니다.

 

이렇게 JSON.parse() 함수의 2번째 파라미터인 reviver 함수를 사용하면

JSON 문자열을 객체로 변경하면서

속성값들의 값도 변경시켜 줄 수 있습니다.

reviver 함수를 잘 이용하면,

몇가지 속성은 제외하고 객체로 변환 할 수도 있겠죠?

 

 

---

 

JSON 문자열을 객체로 변환하여 사용하는 방법을 알아보았습니다.