Fetch 사용하기!

fetch 기본 골격

fetch("여기에 URL을 입력")
// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
	.then(res => res.json()) 
// 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
	.then(data => { 
		console.log(data) // 개발자 도구에 찍어보기
	}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

 

GET 요청은?

https://movie.daum.net/moviedb/main?movieId=68593

위 주소는 ? 로 쪼개진다.

"?" 기준으로 앞부분이 서버주소 / 뒷부분이 영화 번호 이다.

https://movie.daum.net/moviedb/main?movieId=68593

? : 여기서부터 전달할 데이터가 작성된다는 의미이다.

 

fetch 연습하기1

데이터 위치 찾기

RealtimeCityAir > row

fetch(url주소)
	.then(res => res.json()) 
	.then(data => { 
		console.log(data['RealtimeCityAir']['row'][0]);
	})

 

그러면 0번째있는데이터가 출력되는데 반복문으로 구 데이터를 모두 출력해보자

 

fetch("http://spartacodingclub.shop/sparta_api/seoulair") // 기본 요청(GET)
	.then(res => res.json()) // 요청해서 받은 데이터를 JSON화
	.then(data => { // JSON화 한 데이터를 다시 data로 이름짓기
		let rows = data['RealtimeCityAir']['row']
		rows.forEach((a) => {
			// 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기
			console.log(a)
		})
	})

 

1. rows변수에 row전체를 담아둔다.

2. 변수rows에 있는것들을 반복해서 출력해준다 (forEach 사용하기)

 

// forEach 사용법

변수.forEach(a =>{
	//출력내용작성
})

 

fetch연습하기2

버튼을 눌렀을때 가져올 데이터들을 리스트에 추가하려면?

 

let rows = data['RealtimeCityAir']['row']

rows.forEach((a) => {
	let gu_name = a['키값명']
	let gu_mise = a['키값명']
	console.log(gu_name, gu_mise)

	let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
	$('#names-q1').append(temp_html)
})

//html
<ul id="names-q1">
    <li>중구 : 82</li>
</ul>

 

append() : 컨텐츠를 선택된 요소 내부의 끝 부분에서 삽입한다.

 

그러면 이렇게 <li>${gu_name} : ${gu_mise}</li> 태그가 반복문을 돌면서 추가된다.

 

하지만 여기서 문제점?

 

버튼을 누를때마다 데이터 리스트가 또 추가되게 될것이다.

그래서

 

$('#names-q1').empty(); 로 지워준후 다시 데이터를 뿌려주게 해준다.

 

fetch연습하기3

Mission : 미세먼지 수치가 40 이상인 곳은 빨간색으로 표시하라

 

//style
.bad {
    color: red;		
}

//script
function q1() {
    let url = 'http://spartacodingclub.shop/sparta_api/seoulair'
    $('#names-q1').empty(); //지워주기
    fetch(url).then(res => res.json()).then(data => {
        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);
        })
    })
}

 

1. 조건문을 사용해 40이 넘을때만 bad클래스가 추가된 태그로 작성한다.

2.  스타일에서 bad클래스의 스타일을 수가한다.

 

 

 

그러면 이렇게 40이 넘을떄 (조건) 에 맞춰 클래스가 추가되어 스타일이 입혀진다

 

완-썽