방법1.
<body>
<p id="demo"></p>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
/* this나 xhttp(obj명)이나 상관없음 */
if (xhttp.readyState == 4 && xhttp.status == 200) {
jsonFunc(xhttp.responseText);
}
}
xhttp.open("GET", "jsondata.json", true);
xhttp.send();
function jsonFunc(resp) {/* response의 약자 resp(응답) */
//alert('jsonFunc');
//alert(resp); //답 : 문서 전체가 넘어옴
/* json 데이터로 바꿔줘야 함 */
let arr = JSON.parse(resp);
//alert(arr); //답 : [obj] 4개가 나옴.
//alert(arr.length);
let txt = "";
/* let array = [11,22,33];
for(i in array){
console.log(array[i]);
}*/
/* Json은 key로 관리된다 */
/* 키값까지 꺼내기 방법1 */
for (i = 0; i < arr.length; i++) {
for(var key in arr[i]){ /* key값 전체 꺼내기 */
//console.log(key);
txt += key + ":" + arr[i][key]; /* 파일 속 데이터는 2차원배열 */
}
txt += "<br>"; /* 개행 */
}
document.getElementById("demo").innerHTML = txt;
};
</script>
</body>
방법2.
<body>
<p id="demo"></p>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
/* this나 xhttp(obj명)이나 상관없음 */
if (xhttp.readyState == 4 && xhttp.status == 200) {
jsonFunc(xhttp.responseText);
}
}
xhttp.open("GET", "jsondata.json", true);
xhttp.send();
function jsonFunc(resp) {/* response의 약자 resp(응답) */
//alert('jsonFunc');
//alert(resp); //답 : 문서 전체가 넘어옴
/* json 데이터로 바꿔줘야 함 */
let arr = JSON.parse(resp);
//alert(arr); //답 : [obj] 4개가 나옴.
//alert(arr.length);
let txt = "";
/* let array = [11,22,33];
for(i in array){
console.log(array[i]);
}*/
/* Json은 key로 관리된다 */
//방법2
for (i = 0; i < arr.length; i++) {
txt += arr[i].name + " " +
arr[i].age + " " +
arr[i].address + " " +
arr[i].tel + "<br>";
}
document.getElementById("demo").innerHTML = txt;
};
</script>
</body>
jsondata.json
[
{
"name":"정수동",
"age":24,
"address":"광진구",
"tel":"123-123"
},
{
"name":"홍길동",
"age":26,
"address":"강남구",
"tel":"456-153"
},
{
"name":"성춘향",
"age":16,
"address":"마포구",
"tel":"865-234"
},
{
"name":"홍두께",
"age":23,
"address":"은평구",
"tel":"973-113"
}
]'XML & JSON' 카테고리의 다른 글
| JSON // 데이터가 2개이상인값 배열로 접근하기 (0) | 2020.07.14 |
|---|---|
| JSON // 기본 (String <--> Json 호환) (0) | 2020.07.14 |
| XML//외부파일에서 불러와 파씽 (0) | 2020.07.14 |
| XML// table// 파일을 이용한 파씽 (0) | 2020.07.14 |
| XML//table//DOM을 이용한 파씽 (0) | 2020.07.14 |
