fetch
fetch("여기에 URL을 입력")URL을 입력해 준다.
.then((res) => res.json())가져온 정보를 res라고 하여
res를 json형태로 만들라는 의미이다.
.then((data) => {
console.log(data);
});그리고 그것을 data라고 하여
콘솔창에 data를 출력하라는 의미이다.
Fetch 기본 코드
fetch("여기에 URL을 입력")
.then((res) => res.json())
.then((data) => {
console.log(data);
});실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((data) => {
console.log(data);
});
</script>
</head>
<body>
Fetch 연습을 위한 페이지
</body>
</html>
실행하면 위와 같이 뜬다.
오른쪽 클릭을 하여 "검사"를 눌러준다.
화면의 "Console"을 클릭해 준다.
데이터가 잘 들어온 것을 확인할 수 있다.
console.log() 부분에 아래와 같은 형식으로
특정 데이터만 가져오는 것도 가능하다.
console.log(data["RealtimeCityAir"]["row"][0]);data의 RealtimeCityAir의 row의 0번째 데이터를 출력하라는 의미이다.
fetch와 forEach() 문으로 특정 데이터만 가져오기
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((data) => {
let rows = data["RealtimeCityAir"]["row"];
rows.forEach((a) => {
console.log(a);
});
});아래와 같이 forEach() 문으로 원하는 데이터만 반복적으로 가져오는 것도 가능하다.
'구' 이름만 줄줄이 가져오기
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((data) => {
let rows = data["RealtimeCityAir"]["row"];
rows.forEach((a) => {
console.log(a["MSRSTE_NM"]);
});
});
'구' 이름과 '수치'만 줄줄이 가져오기
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((data) => {
let rows = data["RealtimeCityAir"]["row"];
rows.forEach((a) => {
console.log(a["MSRSTE_NM"], a["IDEX_MVL"]);
});
});
"업데이트"를 클릭하여 '구'와 '수치' html에 붙이기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>미세먼지 API로Fetch 연습하고 가기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((response) => response.json())
.then((data) => {
$("#names-q1").empty();
let rows = data["RealtimeCityAir"]["row"];
rows.forEach((a) => {
let gu_name = a["MSRSTE_NM"];
let gu_mise = a["IDEX_MVL"];
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
$("#names-q1").append(temp_html);
});
});
}
</script>
</head>
<body>
<h1>Fetch 연습하자!</h1>
<hr />
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body>
</html>
업데이트를 눌러 원하는 데이터만 HTML에 붙일 수 있다.
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((response) => response.json())
.then((data) => {
$("#names-q1").empty();
let rows = data["RealtimeCityAir"]["row"];
rows.forEach((a) => {
let gu_name = a["MSRSTE_NM"];
let gu_mise = a["IDEX_MVL"];
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
$("#names-q1").append(temp_html);
});
});
}ul태그의 아이디는 'name-q1'이다.
해당 아이디가 있는 태그에 업데이트 버튼을 클릭하면
'구'와 '수치'를
temp_html에서 각각 담아 html에 붙여주게 된다.
'수치'가 40 초과하면 빨간색글자로 표시하기
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((response) => response.json()).then((data) => {
$('#names-q1').empty()
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
let temp_html = ``
if (gu_mise > 40) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
});
})
}css에 .bad를 추가하여 해당 '수치'가 40을 초과한다면
빨간 글자로 표시가 된다.
'웹 탐구' 카테고리의 다른 글
| 리액트) 타입스크립트 컴파일러 설치하기 (0) | 2024.06.09 |
|---|---|
| 디자인 패턴) MVC (0) | 2023.04.16 |
| 웹) HTTP (0) | 2023.04.16 |
| 보안) AWS 보안 강화하기 (0) | 2023.04.05 |
| 크롬 확장 프로그램) JSONVue (0) | 2023.03.25 |
