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
'HTML' 카테고리의 다른 글
| XML / <자신이 읽은 책 5권을 XML파일로 제작후 테이블로 시각화 하기> (0) | 2021.03.09 |
|---|---|
| 39일차//JSON// json파일에서 데이터 이름 찾기(key + value) (0) | 2021.03.09 |
| 39일차//XML// 🧶3. xml 파일을 생성해 데이터작성 후 불러오기 (0) | 2021.03.09 |
| 39일차//XML// 🧶2. parser.parseFromString 문자열 파싱 (0) | 2021.03.09 |
| 39일차//XML// 🧶1. XMLHttpRequest() xml파일을 읽어 문서를 불러온다. (0) | 2021.03.09 |
