JSON.parse()
- 이전 페이지 JSON 데이터 타입
- 다음 페이지 JSON 문자열화
JSON의 일반적인 용도는 웹 서버와 데이터 전송입니다。
웹 서버에서 데이터를 받을 때, 데이터는 항상 문자열입니다。
데이터를 해석하면, 이 데이터는 JavaScript 객체가 됩니다。 JSON.parse() 데이터를 해석하면, 이 데이터는 JavaScript 객체가 됩니다。
예제 – JSON 파싱
웹 서버에서 받은 이 텍스트를 상상해 보세요：
'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'
JavaScript 함수를 사용하세요 JSON.parse() 텍스트를 JavaScript 객체로 변환하세요：
var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');
이 텍스트가 JSON 형식으로 작성되지 않으면 문법 오류가 발생합니다.
صفحات에서 JavaScript 객체를 사용하세요：
예제
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
서버에서 온 JSON
AJAX 요청을 사용하여 서버에서 JSON을 요청할 수 있습니다。
서버의 응답이 JSON 형식으로 작성되면, 문자열을 JavaScript 객체로 변환할 수 있습니다。
예제
XMLHttpRequest를 사용하여 서버에서 데이터를 가져오세요：
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
JSON의 배열로 사용됩니다
배열에서 유래한 JSON을 사용할 때 JSON.parse() 이 메서드는 JavaScript 객체 대신 JavaScript 배열을 반환합니다。
예제
서버에서 반환하는 JSON은 배열입니다：
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
特例
날짜 분석
JSON에서 날짜 객체는 허용되지 않습니다。
날짜를 포함하려면 문자열로 작성하십시오。
그런 다음 날짜 객체로 변환할 수 있습니다：
예제
문자열을 날짜로 변환하십시오：
var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
또는 다음과 같이 사용할 수 있습니다 JSON.parse() 함수의 두 번째 매개변수는 reviver。
이 reviver 매개변수는 함수이며, 반환 값 전에 각 속성을 확인합니다.
예제
문자열을 날짜로 변환하려면 reviver 함수를 사용하십시오：
var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "birth") {
return new Date(value);
} else {
return value;
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
함수 분석
JSON에서 함수는 허용되지 않습니다。
함수를 포함하려면 문자열로 작성하십시오。
그런 다음 함수로 변환할 수 있습니다：
예제
문자열을 함수로 변환하십시오：
var text = '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
JSON에서 함수를 사용하는 것을 피해야 합니다. 함수는 그 스코프를 잃고, 또한 직접 사용하여 eval() 그들을 함수로 변환하세요.
브라우저 지원
모든 주요 브라우저와 최신 ECMAScript (JavaScript) 표준이 포함됩니다 JSON.parse() 함수:
다음 표의 숫자는 완전히 지원 JSON.parse() 함수의 첫 번째 브라우저 버전:
| Yes | 8.0 | 3.5 | 4.0 | 10.0 |
오래된 브라우저용으로 다음 주소에 JavaScript 라이브러리가 사용 가능합니다:
- 이전 페이지 JSON 데이터 타입
- 다음 페이지 JSON 문자열화
