JavaScript에서 JSON 객체를 파싱하는 방법
JavaScript에서 JSON 형식의 문자열을 실제 객체로 변환하려면 내장 메서드인 JSON.parse()를 사용합니다. 이 메서드는 JSON 문자열을 인자로 받아 해당 구조를 그대로 반영한 JavaScript 객체를 반환합니다.
아래 예제는 JSON 문자열을 파싱한 뒤, 각 이벤트의 start와 end 값을 Date 객체로 변환하여 배열에 담고, 그 결과를 다시 JSON 문자열로 출력하는 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<script>
myData = JSON.parse('{"event1":{"title":"Employment period","start":"12\/29\/2011 10:20 ","end":"12\/15\/2013 00:00 "},"event2":{"title":"Employment period","start":"12\/14\/2011 10:20 ","end":"12\/18\/2013 00:00 "}}')
myArray = []
for(var e in myData){
var dataCopy = myData[e]
for(key in dataCopy){
if(key == "start" || key == "end"){
dataCopy[key] = new Date(dataCopy[key])
}
}
myArray.push(dataCopy)
}
document.write(JSON.stringify(myArray));
</script>
</body>
</html>코드 설명
1. JSON 문자열 파싱: JSON.parse()가 JSON 문자열을 해석하여 myData라는 객체로 변환합니다. 변환된 객체에는 event1, event2라는 두 개의 키가 포함되어 있습니다.
2. 데이터 순회 및 날짜 변환: for...in 반복문으로 각 이벤트를 순회하면서, 키가 start 또는 end인 경우 해당 값을 new Date()로 감싸 Date 객체로 변환합니다. 이렇게 하면 이후 날짜 연산이나 비교 작업을 손쉽게 수행할 수 있습니다.
3. 결과 출력: 처리된 객체들을 myArray 배열에 담은 뒤, JSON.stringify()를 사용해 다시 JSON 문자열로 직렬화하여 화면에 출력합니다.
참고: reviver 함수 활용하기
JSON.parse()는 두 번째 인자로 reviver(부활자) 함수를 받을 수 있습니다. 이 함수를 사용하면 파싱 과정에서 특정 키의 값을 자동으로 변환할 수 있어, 위 예제처럼 반복문으로 날짜를 일일이 바꾸는 것보다 더 간결한 코드를 작성할 수 있습니다.
const myData = JSON.parse(jsonString, (key, value) => {
if (key === 'start' || key === 'end') {
return new Date(value);
}
return value;
});JSON 데이터를 다룰 때는 항상 유효한 JSON 형식인지 확인해야 하며, 잘못된 형식의 문자열을 파싱하면 SyntaxError가 발생합니다. 필요하다면 try...catch 문으로 오류를 처리하는 것이 좋습니다.