• JSON
    - JavaScript Object Notation
    - 데이터 저장 및 전송을 위한 형식으로 서버에서 웹 페이지로 데이터를 보낼 때 사용한다.
    - JSON 데이터는 이름(속성)-값 쌍으로 이루어져 있다.

 

//기본형식
var person = {"name":"james", "age":"30", "city":"seoul"};

//배열
var people = {"students":[
	{"name":"james", "age":"30", "city":"seoul"},
	{"name":"kim", "age":"30", "city":"newyork"},
	{"name":"sarah", "age":"30", "city":"london"}
	]};

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>JSON 데이터 출력</h3><br>
	
	<p id="demo"></p><br>
	<p id="demo2"></p><br>
	<p id="demo3"></p><br>
	<p id="demo4"></p><br>
	<p id="demo5"></p>
	
	<script>
	var person = {"name":"james", "age":"30", "city":"seoul"};

	var people = {"students":
		[{"name":"james", "age":"30", "city":"seoul"},
		{"name":"kim", "age":"30", "city":"newyork"},
		{"name":"sarah", "age":"30", "city":"london"}
		]};
	
	document.getElementById("demo").innerHTML = "person.name --> " + person.name;
	document.getElementById("demo2").innerHTML = "people.students --> " + people.students;
	document.getElementById("demo3").innerHTML = "people.students[1] --> " + people.students[1];
	document.getElementById("demo4").innerHTML = "people.students[1].name --> " + people.students[1].name ;
	
	var text="";
	
	for(var i=0; i<people.students.length; i++) {
		text += "이름: " + people.students[i].name;
		text += ", 나이: " + people.students[i].age;
		text += ", 도시: " + people.students[i].city + "<br>";
	}
	document.getElementById("demo5").innerHTML = text;
	</script>
</body>
</html>

 

 

 

 

 

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

[JavaScript] Validation Check  (0) 2021.05.21
[JavaScript] JSON parse  (0) 2021.05.21
[JavaScript] window.onload  (0) 2021.05.20
[JavaScript] 배열  (0) 2021.05.20
[JavaScript] 자바스크립트 기초 정리  (0) 2021.05.18

+ Recent posts