✅ fetch 사용하는 방법
1. fetch 기본 골격 작성
2. 호출할 정보를 가져올 파일경로(또는 URL경로) 작성
3. 호출 성공하면 불러올 정보 조건 작성
🔥 미세면지 수치가 60 보다 큰 곳들만 가져오기
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>띵동코딩 - fetch 연습</title>
<style>
.client {
margin: 10px 10px;
}
</style>
<script>
function mise(){
$('#city').empty();
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then((data) => {
let rows = data['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu = rows[i]['MSRSTE_NM']
let value = rows[i]['IDEX_MVL']
let idex = rows[i]['IDEX_NM']
let temp_html = `<li>${gu} : ${value}(${idex})</li>`
if (value > 60) {
$('#city').append(temp_html);
}
}
});
}
</script>
</head>
<body>
<div>
<button onclick="mise()">미세먼지 정보</button>
<div class="client">지역별</div>
<ul id="city">
</ul>
</div>
</body>
</html>'Javascript' 카테고리의 다른 글
| CSS / Javascript 파일 분리 (0) | 2023.12.07 |
|---|---|
| SQLAlchemy로 Database 조작하기 (0) | 2023.12.04 |
| ChatGPT활용해 JS에 현재 시간 넣는 방법 (0) | 2023.11.27 |
| JS 코딩테스트_vs-code 연습장 활용해서 풀기 (0) | 2023.11.23 |
| 프로그래머스 코딩테스트 - Github연동 2배 활용방법 (1) | 2023.11.22 |
