웹개발 종합 2일차(2-1강 ~ 2-14강)

fetch

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
		console.log(data)
})



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

- 예시

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'])
		})
	})

<!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>${sector} : ${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>

유지할 점
- 데이터를 주고받는 기본적 원리들을 이해하기.
문제점
- 더 익숙해지도록 복습하고 혼자서 따로 더 연습하기.
노력할 점
- 고반복하기!

저작자표시 (새창열림)

'개발공부 > Java／Spring' 카테고리의 다른 글

웹개발 종합 6일차(서버관련) (0)	2023.03.25
웹개발 종합 5일차(5-1강 ~ 5-14강) (0)	2023.03.24
웹개발 종합 4일차(4-1강 ~ 4-15강) (0)	2023.03.23
웹개발 종합 3일차(3-1강 ~ 3-16강) (0)	2023.03.22
웹개발종합 1일차(1-1강 ~ 1-20강) (0)	2023.03.20