Javascript 문법 연습하기(2) - Fetch

웹개발 종합반 2주차 - Javascript 문법 연습하기(2) - Fetch

 

 

 

 

<선행>

크롬 익스텐션 JSONView

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko 

JSONVue

 

 

 

 

 

API

* GET : 데이터 조회 (영화 목록 조회)

* POST : 생성, 변경, 삭제 요청 ( 회원가입, 회원탈퇴, 비밀번호 수정 등)

 

 

 

 

fetch 기본 골격

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

            console.log(data)

        })

 

 

1. 미세먼지 OpenAPI URL을 입력

미세먼지 OpenAPI URL

 

 

2. consol에서 볼 수 있는 출력되는 데이터

검사 - consol

 

3. 0번째 요소만 출력

        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

            console.log(data['RealtimeCityAir']['row'][0])

        })

결과

 

4. 반복

        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

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

            rows.forEach((a) => {

                console.log(a)

            })

        })

 

5. 구의 이름과 수치만 나오게 하기

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

            })

        })