fetch 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fetch JSON</title>
<link rel="stylesheet" href="css/fetch.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<h1>수강생 명단</h1>
<div id="result"></div>
</div>
<script src="js/fetch.js"></script>
</body>
</html>
student-2.json
[
{
"name" : "도레미",
"major" : "컴퓨터 공학",
"grade" : 2
},
{
"name" : "백두산",
"major" : "철학과",
"grade" : 1
},
{
"name" : "홍길동",
"major" : "국문학과",
"grade" : 3
}
]
JS
fetch('student-2.json')
.then(response => response.json())
.then(json => {
let output= "";
json.forEach(student => {
output += `
<h2>${student.name}</h2>
<ul>
<li>전공: ${student.major}</li>
<li>학년: ${student.grade}</li>
</ul>
<hr>
`;
});
document.querySelector("#result").innerHTML= output;
console.log('11');
//$("#result").append(output);
})
결과
