반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
Java Script Object Notation
표기법
데이터를 저장, 전송, 불러오기
Array -> JSON
한쌍(pair) key:value == HashMap
Web(client) Java(server)
Json HashMap, list
-->
<p id="demo">
</p>
<script>
// var arr = [1, 2, 3];
// var arr2 = [
// [1, 2],
// [3, 4]
// ];
var arr = [{
"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"];
var arrText = '{"name" : "홍길동", "age": 24, "주소":"서울시"}'; //Json아님
// {
// "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>[{
"name": "홍길동",
"age": 24,
"address": "서울시",
"phone": "123"
},
{
"name": "성춘향",
"age": 17,
"address": "남원시",
"phone": "234"
},
{
"name": "홍두께",
"age": 22,
"address": "강릉시",
"phone": "345"
}
]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="demo"></div>
<script>
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>
반응형
'JavaScript > JSON' 카테고리의 다른 글
| JSON 파일 값을 읽어서 테이블에 표시하기 (0) | 2020.01.15 |
|---|
