웹에서 JSON 데이터 받아오기
기본
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="first">
</h1>
<script>
// 통신용 메소드
// fetch 함수를 실행하고
// 뒤에 then catch finally 선택해서 입력
// then catch finally는 콜백함수를 매개변수로
fetch("https://jsonplaceholder.typicode.com/posts/1") // Promise형 반환
// json 데이터를 받는 주소면 아래 코드 고정
// .then((response) => response.json())
// json() 사용 시 응답 내용에서
// json 데이터를 자스 객체로 바꿔줌
.then((response) => {
console.log(response);
return response.json(); // Promise형 반환
})
.then((result) => {
console.log(result);
document.querySelector("#first").innerHTML = result.title;
});
</script>
</body>
</html>랜덤 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="randomButton">랜덤</button>
<h1 id="first">
</h1>
<script>
// 버튼을 누르면 getData 함수 실행
// id가 first인 태그에 title을 넣기
// 비동기 통신
// 언제 들어올 지 모르는 데이터를 다룰 때 사용
// 순차적으로 실행 X, 결과가 들어오면 실행
const getData = () => {
const ranPostNum = Math.ceil(Math.random() * 100);
fetch(`https://jsonplaceholder.typicode.com/posts/${ranPostNum}`)
.then((response) => {
return response.json();
})
.then((result) => {
console.log(result);
document.querySelector("#first").innerHTML = "제목 : " + result.title;
console.log("fetch함수 내부")
});
console.log("fetch함수 이후")
}
document.querySelector("#randomButton").addEventListener("click", getData);
</script>
</body>
</html>
실습
.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="titleList">
</ul>
<script>
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((result) => {
console.log(result);
for (const iterator of result) {
document.querySelector("#titleList").insertAdjacentHTML(
"beforeend",
`<li>${iterator.id}. ${iterator.title}</li>`
);
};
// forEach 자동완성으로 하면 안됨
// result.forEach(element => {
// document.querySelector("#titleList").insertAdjacentHTML(
// "beforeend",
// `<li>${element.id}. ${element.title}</li>`
// );
// });
});
</script>
</body>
</html>
.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="movieRank">
</ul>
<script>
fetch("http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230707")
.then((response) => response.json())
.then((result) => {
console.log(result.boxOfficeResult.dailyBoxOfficeList);
for (const iterator of result.boxOfficeResult.dailyBoxOfficeList) {
document.querySelector("#movieRank").insertAdjacentHTML(
"beforeend",
`<li>${iterator.rank}위. ${iterator.movieNm}</li>`
);
};
// forEach 자동완성으로 하면 안됨
// result.boxOfficeResult.dailyBoxOfficeList.forEach((value) => {
// document.querySelector("#movieRank").insertAdjacentHTML(
// "beforeend",
// `<li>${value.rank}위. ${value.movieNm}</li>`
// )
// })
})
</script>
</body>
</html>
유승한