<!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() {
const city = document.querySelector("#city");
let url =
"http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99";
fetch(url)
.then((res) => res.json())
.then((data) => {
city.replaceChildren();
console.log(data);
let rows = data["RealtimeCityAir"][["row"]];
for (a of rows) {
if (a["PM10"] > 20) {
let gu = a["MSRSTE_NM"];
let value = a["IDEX_NM"];
let pm10 = a["PM10"];
let temp_html = `<li>${gu} : ${pm10}(${value})</li>`;
$("#city").append(temp_html);
console.log(a["MSRSTE_NM"], a["IDEX_NM"]);
}
}
});
}
</script>
</head>
<body>
<div>
<button onclick="mise()">미세먼지 정보</button>
<div class="client">지역별</div>
<ul id="city">
<li>용산구 : 80</li>
<li>동작구 : 29</li>
<li>도봉구 : 58</li>
</ul>
</div>
</body>
</html>
[띵동코딩]jQuery fetch