๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒ  ์ž๋ฐ” ์„œ๋ฒ„ ํŽ˜์ด์ง€ JSP/๐Ÿ›ธ ์ œ์ด์Šจ XML\JSON

2๏ธโƒฃ ์ œ์ด์Šจ JSON - ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ

by Meteora_ 2021. 3. 9.
728x90

 

<!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", "data.json", true);
xhttp.send();

function jsonFunc( respTxt ) {
//	alert(respTxt);
	
	let json = JSON.parse(respTxt);
//	alert(json);
//	alert(json.length);

	let txt = "";
	/*
	let array = [11, 22, 33];
	for(i in array){
		console.log(array[i]);
	}
	*/	
	
	/*
	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>

 

 

Json ํŒŒ์ผ-> data.json

 

[
	{
		"name":"์ •์ˆ˜๋™",
		"age":23,
		"address":"์„œ์šธ์‹œ",
		"height":181.1	
	},
	{
		"name":"์‹ฌ์ฒญ์ด",
		"age":14,
		"address":"๊ฐ•์›์‹œ",
		"height":165.3	
	},
	{
		"name":"ํ–ฅ๋‹จ์ด",
		"age":16,
		"address":"๋‚จ์›์‹œ",
		"height":157.9	
	},
	{
		"name":"์ด๋ชฝ๋ฃก",
		"age":18,
		"address":"๊ณต์ฃผ์‹œ",
		"height":173.7	
	}
]

๋Œ“๊ธ€