2-6. Fetch 시작하기(2)

앞서 했던 미세먼지 데이터를 불러와서 보기까지 했다.

잘 들어왔는지 확인하기 위해서는 아래 코드를 작성해보자.

<script>

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

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

        })

    </script>

위 console.log란을 수정해주었다. 실행해보면 중구가 잘 나온다.

 

이제 반복문을 활용해보자.

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

            rows.forEach((a) => {

                console.log(a)

            })

이걸 저장후 확인해보면 row에 해당하는 모든 구들의 미세먼지 정보들이 쭈르르륵 나온다.

보기 쉽게 하기위해 이름만 나오게 하려한다.

먼저 미세먼지 API 사이트에 들어가서  MSRSTE_NM 를 복사한다.

그리고 console.log를 아래 처럼 수정해주고 저장하게 되면 그 밑 사진처럼 나오게 된다.

console.log(a['MSRSTE_NM'])

이렇게 구의 이름들을 확인할 수 있다. 이번엔 IDEX_MVL 를 복사한뒤 아래 처럼 작성해보자.

console.log(a['MSRSTE_NM'],a['IDEX_MVL'])

그러면 구 이름과 수치를 찍어줘라가 되는거다. 저장하게 되면 console창에 아래 사진처럼 나온다.