JSON이란?
Java Script Object Notation 의 약자이며, 직역하면 자바스크맆트 객체 표기법 이다.
JSON 표기법은 사람과 기계 모두 이해하기 쉬우며 용량이 작다는 장점이 있다.
JSON의 구조는 Array(배열)와 흡사하며, 2차원 배열 이라고 이해하면 쉽게 이해할 수 있다.
Array[Number][KEY] 형태로 보면 "몇번째 어떤키값"으로 데이터를 찾을 수 있어 상당히 직관적인것이 장점이다.
구두로 말을 뱉음과 동시에 어떠한 데이터인지 명확하게 알 수있다. "몇번째에 있는 어떤 데이터를 찾고 싶은가?"
JSON 작성방식
[]괄호 안에 {}괄호가 하나의 객체(row)이며, 하나의 객체(row)는 KEY와 VALUE를 PAIR를 이루어 필드값으로 존재 한다.
쉽게 말해 2차원 배열 형태이며, 안쪽값은 PAIR형태를 띄고있다고 보면 이해하기 쉽다.
[
{
"name":"홍길동",
"age":24,
"address":"서울시",
"phone":"123"
},
{
"name":"성춘향",
"age":17,
"address":"남원시",
"phone":"234"
},
{
"name":"홍두께",
"age":22,
"address":"강릉시",
"phone":"345"
}
]JSON 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
/*
var arr = [ 1, 2, 3 ];
var arr2 = [ [1, 2], [3, 4] ];
*/
var arr = [ /* Json */
{
"name":"홍길동",
"age":24
},
{
"name":"일지매",
"age":21
},
{
"name":"성춘향",
"age":17
}
];
document.getElementById("demo").innerHTML
// = arr[0].name + " " + arr[0].age;
= arr[1]["name"] + " " + arr[1]["age"];
// String(Json이 아니다)
var arrText = '{ "name":"홍길동", "age":24, "주소":"서울시" }';
var jsonObj = JSON.parse(arrText); // String -> json
var str = JSON.stringify(jsonObj); // json -> String
document.getElementById("demo").innerHTML
= jsonObj.name + " " + jsonObj.age + " " + jsonObj.주소;
</script>
</body>
</html>XMLHttpRequest JSON 연결
XMLHttpRequest 객체를 텍스트로 받아 JSON.parse 하여 사용한다.
접근 방법은 위에서 말한것과 같이 arr[i].Key 즉, arr객체의 i번째 Key로 접근 할 수있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
jsonFunc( xmlhttp.responseText );
}
}
xmlhttp.open("GET", "jsondata.json", true);
xmlhttp.send();
function jsonFunc( resp ) {
var arr = JSON.parse( resp ); // json으로 만들어 준다
var txt = "";
alert(arr.length);
// key:value를 취득
/*
for(i = 0;i < arr.length; i++){
for(key in arr[i]){
txt += key + ":" + arr[i][key];
}
txt += "<br>";
}
*/
for(i = 0;i < arr.length; i++){
txt += arr[i].name + " " +
arr[i].age + " " +
arr[i].address + " " +
arr[i].phone + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>'Algorithm, Data Structure > XML and JSON' 카테고리의 다른 글
| JAVA에서 XML문서 읽기 (0) | 2020.01.15 |
|---|---|
| XML 이란? (JS/XMLHttpRequest 와 DOMParser 객체) (0) | 2020.01.15 |