HTML
39일차//JSON// JSON 구조 문법 + 실습
aesup
2021. 3. 9. 19:39
728x90
JSON 구조
JSON은 자바스크립트의 객체 표기법으로부터 파생된 부분 집합입니다.
따라서 JSON 데이터는 다음과 같은 자바스크립트 객체 표기법에 따른 구조로 구성됩니다.
1. JSON 데이터는 이름과 값의 쌍으로 이루어집니다.
2. JSON 데이터는 쉼표(,)로 나열됩니다.
3. 객체(object)는 중괄호({})로 둘러쌓아 표현합니다.
4. 배열(array)은 대괄호([])로 둘러쌓아 표현합니다.
JSON 데이터
JSON 데이터는 이름과 값의 쌍으로 구성됩니다.
이러한 JSON 데이터는 데이터 이름, 콜론(:), 값의 순서로 구성됩니다.
문법
"데이터이름": 값
배열과 객체의 차이점
JSON에서 배열과 객체는 여러 데이터를 묶어놓은 집합이라는 점에서 서로 비슷한 타입입니다.
하지만 객체는 프로퍼티의 집합이며, 배열은 데이터값의 집합이라는 차이가 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id = "demo"></p>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(xhttp.readyState == 4 && xhttp.status == 200){
jsonFunc(this.responseText);
//this == xhttp
}
}
xhttp.open("GET","data.json", true);
xhttp.send();
function jsonFunc(respTxt) {
//alert(respTxt);
let json = JSON.parse(respTxt);
//alert(json); -> 텍스트를 json 으로 변경
//alert(json.length);
let txt = "";
/* for (var i = 0; i < json.length; i++) {
} */
/* for(i in array){
//위 이 조건은 밸류값이 아닌 인댁스 값이 나온다.
//자바와자바스크립트에 차이점
console.log(i);
}
*/
//1번
//key값과 같이 가져오기
/* for (var i = 0; i < json.length; i++) {
for(key in json[i]){
txt += key + " : " + json[i][key];
}
txt += "<br>";
} */
//2번
//key값빼고 데이터만 얻어오기
for (var i = 0; i < json.length; i++) {
txt += json[i].name + " " +
json[i].age + " " +
json[i].address + " " +
json[i].height + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>Json
[
{
"title":"현빈",
"author":23,
"address":"서울시",
"height":"185"
},
{
"name":"원빈",
"age":40,
"address":"시흥시",
"height":"185"
},
{
"name":"양세종",
"age":26,
"address":"서울시",
"height":"185"
},
{
"name":"주지훈",
"age":45,
"address":"서울시",
"height":"185"
}
]
728x90