모든지 기록하자!

JSON과 사용예시 본문

JavaScript/json

JSON과 사용예시

홍크 2021. 6. 8. 22:56
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 
		JSON : Java Script Object Notation
					 표기법
				Server(java) < --- > Client(Ajax)
				Arraylist			 Json
				HashMap
				
				key : value   //json도 키,벨류 페어로 이루어져 있다.
				
				[ 10, 20, 30 ] -> index 0 1 2
				
				{ num:10, age:20, count:30 } -> key는 num, age, count
				
				[
					{
						name:"홍길동",
						age:24,
						address:"서울시"
					},
					{
						name:"성춘향",
						age:16,
						address:"남원시"
					}
				
				
				]

 -->
 
 <p id="demo"></p>
 
 <script type="text/javascript">
 
 let jsonData = [				//json
					 {
						name:"홍길동",
						age:24
					 },
					 {
						name:"성춘향",
						age:16
					 },
					 {
						name:"일지매",
						age:22
					 },
					 	 
				 ];
//alert(jsonData);
document.getElementById("demo").innerHTML = jsonData[0].name + " " + jsonData[0].age;


let jsonText = '{ "name":"홍두께", "age":25, "주소":"서울시"}';  // 문자열로 사용시 key값을 무조껀 문자열로 해야한다.("")
//alert(jsonText);
//document.getElementById("demo").innerHTML = jsonText.name // jsonText 문자열 json 이아니다

let jsonObj = JSON.parse(jsonText); // String -> Json(object) 으로 변환
//alert(jsonObj);

let jsonStr = JSON.stringify(jsonObj); // Json(object) -> String으로 변환
//alert(jsonStr);

document.getElementById("demo").innerHTML = jsonObj.name + " " + jsonObj.주소;

</script>
 
 

</body>
</html>

JSON파일 읽어오기

member.json 파일

[
	{
		"name":"정수동",
		"age":24,
		"address":"서울시",
		"height":175.6
	},
	{
		"name":"심청",
		"age":14,
		"address":"강원시",
		"height":155.4
	},
	{
		"name":"향단",
		"age":17,
		"address":"남원시",
		"height":161.2
	},
	{
		"name":"이몽룡",
		"age":17,
		"address":"공주시",
		"height":173.1
	}
]
<!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(xhttp.responseText);
	}
}
xhttp.open("GET","member.json", true);
xhttp.send();

function jsonfunc( jsonText ) {
	//alert(jsonText);
	
	let json = JSON.parse(jsonText); // jsonText(String)를 json(object)으로 변환
//	alert(json);

	let txt = ""; // 문자열 초기화
	/*
	for(i=0; i< json.length; i++){
		for (key in json[i]) {
			txt += key + ":" + json[i][key];
		}
		txt += "<br>";
	}
	*/
	for (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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="demo"></p>

<script type="text/javascript">
let json = {
	       "quiz": {
	           "sport": {
	               "q1": {
	                   "question": "Which one is correct team name in NBA?",
	                   "options": [
	                       "New York Bulls",
	                       "Los Angeles Kings",
	                       "Golden State Warriros",
	                       "Huston Rocket"
	                   ],
	                   "answer": "Huston Rocket"
	               }
	           },
	           "maths": {
	               "q1": {
	                   "question": "5 + 7 = ?",
	                   "options": [
	                       "10",
	                       "11",
	                       "12",
	                       "13"
	                   ],
	                   "answer": "12"
	               },
	               "q2": {
	                   "question": "12 - 8 = ?",
	                   "options": [
	                       "1",
	                       "2",
	                       "3",
	                       "4"
	                   ],
	                   "answer": "4"
	               }
	           }
	       }
	   };
	   
//document.getElementById('demo').innerHTML = json.quiz.sport.q1.question;   
document.getElementById('demo').innerHTML = json.quiz["sport"].q1.question; 
//"Which one is correct team name in NBA?" 출력

document.getElementById('demo').innerHTML = json.quiz["sport"].q1.options[2]; //Golden State Warriros출력
document.getElementById('demo').innerHTML = json.quiz.maths.q1.options[2]; //12출력

</script>

</body>
</html>
728x90
Comments