개괄
JSON은 웹 서버와 데이터를 교환
웹 서버에서 데이터를 수신 할 때 데이터는 항상 문자열
JSON.parse() 사용하여 데이터를 파싱하면 데이터가 기본적으로 JS 객체 로 반환됨. (예외도 있음)
예제1 - JSON 파싱 기본 형태
<!DOCTYPE html>
<html>
<body>
<p id="hz"></p>
<script>
var txt = '{"name":"홈짱닷컴", "domain":"Homzzang.com", "year":2012}'
var obj = JSON.parse (txt);
document.getElementById("hz").innerHTML = obj.name + ", " + obj.domain + ", " + obj.year;
</script>
</body>
</html>
※ txt 변수에 들어간 내용을 웹서버에서 가져왔단 가정.
예제2 - JSON 파싱 (JS 객체 반환)
test.js 내용
{
"name":"홈짱닷컴",
"domain": "Homzzang.com",
"since": 2012,
"subject":[
{ "subject":"HTML", "intro":"홈페이지 뼈대" },
{ "subject":"CSS", "intro":"홈페이지 디자인" },
{ "subject":"JS", "intro":"홈페이지 동적기능" }
]
}
<!DOCTYPE html>
<html>
<body>
<p id="homzzang "></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var hz = JSON.parse (this.responseText);
document.getElementById("homzzang ").innerHTML =
hz.name + " " + hz.domain + " " + hz.since ;
}
};
xmlhttp.open("GET", "test.js ", true);
xmlhttp.send();
</script>
</body>
</html>
예제3 - 배열 파싱 (JS 배열 반환)
test.js 내용
[ "홈짱닷컴", "Homzzang.com", 2012]
<!DOCTYPE html>
<html>
<body>
<p id="homzzang "></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var hz = JSON.parse (this.responseText);
document.getElementById("homzzang ").innerHTML =
hz[0] + " " + hz[1] + " (Since " + hz[2]+ ")";
}
};
xmlhttp.open("GET", "test.js", true);
xmlhttp.send();
</script>
</body>
</html>
예외
예외1 - 날짜 파싱 (문자열로 파싱 후, 나중에 다시 날짜 형식으로 변환)
Date 객체는 JSON에서 사용할 수 없음.
날짜를 포함해야하는 경우, 이를 문자열 로 표기 .
나중에 다시 날짜 객체로 변환 가능
<html>
<body>
<p id="homzzang "></p>
<script>
var text = '{"site":"홈짱닷컴", "domain":"Homzzang.com", "today":"2018-08-11 "}';
var hz = JSON.parse(text);
hz.today = new Date(hz.today);
document.getElementById("homzzang ").innerHTML =
hz.site + ", " + hz.domain + ", " + hz.today;
</script>
</body>
</html>
방법2 - json.parse 함수의 두 번째 매개변수 활용
<!DOCTYPE html>
<html>
<body>
<p id="homzzang"></p>
<script>
var text = '{"site":"홈짱닷컴", "domain":"Homzzang.com", "today":"2018-08-11"}';
var hz = JSON.parse (text, function (key, value) {
if (key == "today") {
return new Date(value);
} else {
return value;
}});
document.getElementById("homzzang").innerHTML =
hz.site + ", " + hz.domain + ", " + hz.today;
</script>
</body>
</html>
예외2 - 함수 파싱 (문자열로 파싱 후, 나중에 다시 함수로 변환)
함수는 JSON에서 사용할 수 없음. (왜냐면, 함수가 그 적용 범위를 잃음)
함수를 포함해야하는 경우, 이를 문자열 로 표기 .
나중에 eval() 다시 함수로 변환 가능
<!DOCTYPE html>
<html>
<body>
<p id="homzzang "></p>
<script>
var text = '{"site":"홈짱닷컴", "domain":"Homzzang.com", "since":"function() {return 2012;} "}';
var hz = JSON.parse (text);
hz.since = eval ("(" + hz.since + ")");
document.getElementById("homzzang ").innerHTML =
hz.site + ", " + hz.domain + ", " + hz.since() ;
</script>
</body>
</html>
지원 브라우저
JSON.parse () 함수는 모든 주요 브라우저와 최신 ECMAScript (JavaScript) 표준에 포함되어 있음.
Web Browsers Support
Firefox 3.5
Internet Explorer 8
Chrome
Opera 10
Safari 4
