2-9. Fetch 퀴즈 (1)

이번에는 서울시 따릉이를 가지고 반복하면서 익숙해지도록 한다.

정류장이름과 따릉이 갯수를 내보내는 걸로 만들어보려한다.

우선 따릉이 openAPI를 복사해서 열어주면 아래창이 나온다.

http://spartacodingclub.shop/sparta_api/seoulbike

이걸 아래 페이지의 표처럼 붙여넣으려한다.

우선 console창에 위 페이지에서 필요한것인 위치, 거치대수, 자전거 수를 불러온다. 

function q1() {

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

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

               

                rows.forEach((a) => {

                    let name = a['stationName']

                    let rack = a['rackTotCnt']

                    let bike = a['parkingBikeTotCnt']

                    console.log(name,rack,bike)

                })

            })

        }

업데이트 버튼을 누르게 되면 아래 결과가 나온다.

이제는 temp_html을 만들어서 그대로 붙여주면된다. 먼저 아래 코드로 수정하고 작성한 뒤 실행해주면 아래 사진처럼 결과가 나온다.

 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 = `<tr>

                                        <td>${name}</td>

                                        <td>${rack}</td>

                                        <td>${bike}</td>

                                    </tr>`

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

                })

            })