Fetch 데이터 가져오기

FETCH로 데이터 가져오기

 

 

1. fetch 기본골격

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

            console.log(data)

        })      

 

 

2. 일부만 가져오기

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

            let rows = data['RealtimeCityAir']['row']                => 데이터중 realtimecityair 에서 row탭을 가져옴

            rows.forEach((a) => {                                           => foreach 반복문으로 msrste_nm , idex_mivl만 반복가져옴

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

            })

        })

 

 

3.가져와서 html로 붙치기

<script>

        function q1() {

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

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

               $('#names-q1').empty()

                rows.forEach((a)  => {

                   let gu_name = a['MSRRGN_NM']          =>가져올 값들 변수 설정

                   let gu_mise = a['IDEX_MVL']        

                   

                   let temp_html = `<li> ${gu_name} : ${gu_mise}</li>`           => `` 백틱

                   $('#names-q1').append(temp_html)              =>  .append(변수명)으로 붙쳐주기

                })                                                                      => $('# 태그명 ' ) 으로 불러옴

            })

        }

    </script>

 

 

4.fetch로 데이터 가져와서 조건문 반복문 종합

<script>

        function q1() {

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

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

                $('#names-q1').empty()

                rows.forEach((a) => {  

                    let name = a['stationName']

                    let rack = a['rackTotCnt']          

                    let bike = a['parkingBikeTotCnt']

                    let temp_html = ``

                    if (bike < 5) {

                        temp_html =                    

                            `<tr class = "red">

                            <td>${name}</td>

                            <td>${rack}</td>                    

                            <td>${bike}</td>

                            </tr>`

                    }

                    else {

                        temp_html =                    

                            `<tr>

                            <td>${name}</td>

                            <td>${rack}</td>                    

                            <td>${bike}</td>

                            </tr>`

                    }

                    $('#names-q1').append(temp_html)

                })

            })

        }

    </script>